jquery function in my javascript file doesn't get called

Question

In my ASP.NET MVC application, I have a javascript file which has a jquery function in a javascript file under the Scripts folder. The function listens to drop down click event and fills the textbox with the selected value like below, but when I click the drop down option, this method doesn't get called and the value is not set in the text box. When I run with debugger (F12), if I paste the function in the debugger command line then clicking the drop down works!!!! Not sure why the method is not registered from the javascript file. The dropdown-menu and input text box are created using bootstrap input-group. The drop down is initially empty and filled by reading from a file in setup() function.

// In test.js
var testMap = {}

$(function () {
    $("#dropdownlistId li a").click(function () {
        var name = $(this).text();
        $("#textBoxId").val(name);
    });
});

function setup() {
    // Read name and value pair in testMap
    ...
    // Append names to drop down list
    $.each(testMap, function (key, value) {
            $("#dropdownlistId").append("<li> <a tabindex=\"-1\" href=\"#\"> " + key + "</a>  </li>");
    });
}

$(document).ready(function () {
    setup();
});

In my cshtml file, I am calling the javascript file like:

@section Scripts {
    @Scripts.Render("~/scripts/test.js") 
}

<div class="col-md-3">
    <div class="input-group">
        <input id="textBoxId" type="text" class="form-control" placeholder="Enter name" />
        <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul id="dropdownlistId" class="dropdown-menu pull-right"></ul>
        </div>
    </div>
</div>

What function isn't being called? $("#dropdownlistId li a").click()? Is your javascript file (test.js) getting loaded? When you view your developer tools, does the file showup in the dropdown of the "Script" tab? — Jerad Rose
– Jerad Rose, Commented Nov 14, 2013 at 20:11

ArrayKnight · Accepted Answer · 2013-11-14 20:31:57Z

3

You are running into an issue where you're trying to bind to elements that do not yet exist. The ul#dropdownlistId exists statically in the page template, but the li's and their children are populated after the DOM Ready (via your setup function). You can change the binding to be bound to the element that always exists (ul#dropdownlistId) and only act on certain child elements (li a):

$(function () {
    $('#dropdownlistId').on('click', 'li a', function () {
        $('#textBoxId').val($(this).text());
    });
});

edited Nov 14, 2013 at 20:31

answered Nov 14, 2013 at 20:19

ArrayKnight

7,4264 gold badges19 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chris Pratt Over a year ago

That's exactly the problem: the binding happens before the elements are actually present on the page.

AloofC Over a year ago

Right, that was it. So does this mean that the jquery methods are bound to DOM elements at compile time?

ArrayKnight Over a year ago

The binding still occurs at DOM Ready, but it essentially makes it so you don't have to bind to each child individually.

Collectives™ on Stack Overflow

jquery function in my javascript file doesn't get called

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related