直到我在Firebug中设置断点，jQuery才会执行

Question

I am using twig to generate my html stuff and an external js file to call jQuery(document).ready(function() {....}); This probably is a simple problem but I can't figure it out.

Here's my code: base.html.twig

<script>
    var currentPage = "{{ path(app.request.attributes.get('_route'),app.request.attributes.get('_route_params')) }}".replace(/[0-9]|\//g, '').toLowerCase().replace('app_dev.php', '');
    $.ajax({
        type: 'GET',
        url: "{{ asset('/app_dev.php/GetMenuJson/') }}" + currentPage,
        success: function(data){
            constructMenuData(data);
        }
    });
    function constructMenuData(menuData)
    {
        var contentForDiv = "";
        //Bunch of other concatenation statements to generate the html
        contentForDiv += "<li><a href=''  class='menuLink'  id='"+result[j][k]["id"]+"'>" + result[j][k]["menuName"] + "</a></li>";
        contentForDiv += "</div>";
        // At the end
        $('#menu').html(contentForDiv);
    }
</script>

In my index.html.twig

{% extends "::base.html.twig" %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('bundles/productorderlookup/js/ProductOrderEdit.js') }}" type="text/javascript"></script>

ProductOrderEdit.js

jQuery(document).ready(function() {
    $('a.menuLink').click(function (event) {
        event.preventDefault();
        console.log("IN THE FUNCTION");
    })
});

My generated html looks like this

<ul id="menu-item">
    <li>
        <a id="1" class="menuLink" href="">Release</a>
    </li>
    <li>
        <a id="17" class="menuLink" href="">Other Pos</a>
    </li>
    <li>
        <a id="18" class="menuLink" href="">FSC Labels</a>
    </li>
</ul>

Problem: The link when clicked on doesn't work. I have tried wrapping it up in another function explicitly and calling it in the index.html.twig file but it still won't work. The only time it works is when I put a breakpoint in firebug. I realize this probably is some kind of race condition or some other minor problem but I am not able to fix it. I have tried searching various questions on SO but it wasn't helpful so far. What might be the problem?

NOTE: I have multiple jQuery(document).ready(function() {...}); all over the page. Not sure if that matters.

Answer 1

This should be pretty straight.

First, having multiple jQuery(document).ready(function() {...}); does not affect any code flow. It might negatively affect your app's performance if you have a lot of them, but the functionality should remain intact. That is as long as code in one ready does not depend on another ready - that is just plain bad :).

Now, back to your problem: If I see it right, you send out ajax call that returns json containing menu items which are then converted to html and put into #menu element. The problem is that the page has announced ready event long before the items have been returned to your page. In turn, your code

$('a.menuLink').click(function (event){ ... });

should not have bound any element - those are not there yet.

The quick fix would be to use delegated bind ( on ) instead of click which binds not only currently present elements but those that will be created in future. Assuming the #menu element is always present, you could do:

$('#menu').on('click', 'a.menuLink', function(){
    // Here goes your code, same as you originally intended
});

Does this help?