gpt4 book ai didi

javascript - 直到我在 Firebug 中设置断点后,jQuery 才会执行

转载 作者:行者123 更新时间:2023-12-03 09:35:42 25 4
gpt4 key购买 nike

我正在使用 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>

问题:点击后链接不起作用。我尝试将其显式包装在另一个函数中,并在 index.html.twig 文件中调用它,但它仍然无法工作。它唯一起作用的时候是当我在 Firebug 中放置断点时。我意识到这可能是某种竞争条件或其他一些小问题,但我无法修复它。我尝试过搜索有关 SO 的各种问题,但到目前为止没有帮助。可能是什么问题?

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

最佳答案

这应该很简单。

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

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

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

不应该绑定(bind)任何元素——那些还没有。

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

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

这有帮助吗?

关于javascript - 直到我在 Firebug 中设置断点后,jQuery 才会执行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31343964/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com