jQuery 直到我在 Firebug 中放置一个断点后才会执行

Question

我正在使用 twig 生成我的 html 东西和一个外部 js 文件来调用 jQuery(document).ready(function() {....}); 这可能是一个简单的问题，但我无法弄清楚。

这是我的代码： 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>

在我的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");
    })
});

我生成的 html 看起来像这样

<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>

问题：点击后link不生效。我已经尝试将它明确地包装在另一个函数中并在 index.html.twig 文件中调用它，但它仍然不起作用。它唯一起作用的时候是我在 firebug 中放置断点的时候。我意识到这可能是某种竞争条件或其他一些小问题，但我无法修复它。我曾尝试在 SO 上搜索各种问题，但到目前为止没有帮助。可能是什么问题？

注意： 我在整个页面上有多个 jQuery(document).ready(function() {...});。不确定这是否重要。

Answer 1

这应该很直白。

首先，拥有多个 jQuery(document).ready(function() {...}); 不会影响任何代码流。如果您有很多应用程序，它可能会对您的应用程序的性能产生负面影响，但功能应该保持不变。只要一个 ready 中的代码不依赖于另一个 ready 中的代码——那是很糟糕的:)。

现在，回到你的问题：如果我没看错，你发送 ajax 调用 returns json 包含菜单项，然后将其转换为 html 并放入 #menu 元素。问题是页面在项目返回到您的页面之前很久就宣布了 ready 事件。反过来，你的代码

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

不应该绑定任何元素 - 那些还没有。

快速解决方法是使用委托绑定 (on) 而不是 click，它不仅绑定当前存在的元素，还绑定将来创建的元素。假设 #menu 元素始终存在，您可以这样做：

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

这有帮助吗？

jQuery 直到我在 Firebug 中放置一个断点后才会执行

jQuery does not execute until I put a break point in Firebug

html

javascript

jquery

firebug

symfony