Question

对于通过ajax或任何页面后加载的动态添加元素，我知道我们必须使用.on之类的

$(document).on('click', '#dynamically-added-element', function() {
    // do something
    console.log('Hello World!');
});

我甚至用(function($){})(jQuery);包裹我，以确保没有冲突;并确保所有内容都按正确的顺序运行/加载，我也有$(document).ready(function(){});。

现在该事件原本打算在Page A上运行并且效果很好，但是当我制作并试用它时，Page B运行主容器的id并且有同样的子HTML，它不起作用。

所以我做了一些实验/测试，两者都有效。

（1）所以我做了什么，我通过我的浏览器控制台只用console.log编写了完全相同的事件监听器，然后单击目标元素，它就可以了！

（2）在相同的.js脚本中，我添加了完全相同的事件监听器，只有console.log但是将其包含在setTimeout(function(){}, 5000);内，5秒后，我点击了目标元素，它工作！

所以现在我的问题是，为什么我原来的代码不起作用？为什么这些测试有效？那么解决方案是什么？

另外，我的html元素没有动态加载，它是在页面加载时加载的，是通过服务器端PHP生成的。

修改此信息可能有用。

在magento中运行
js脚本包含在head上（这就是$(document).ready非常重要的原因）。
在我的自定义脚本之前加载了jquery脚本。
页面A和页面B位于不同的页面上。
它不是ajax生成的元素，也不是js / jquery添加的元素;它是使用php代码

（3）我的第三个实验也有效。但是如果可能的话，我不希望这是我的解决方案，也不希望使用内嵌onclick的javascript。所以我做了什么，我在php文件中添加了一个全新的脚本块，其中＆＃39; part＆＃39;正在包含页面，使用完全相同的代码并且它可以正常工作。但问题是，我现在有两个相同的事件监听器。

所以现在我有2个相同的事件监听器（无论另一个是否工作 - 仅适用于B页），1来自内部（内部）和1来自外部.js文件。

<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        $(document).on('click', '#the-container a', function(e) {
            e.preventDefault();
            var target = $(this).attr('href');
        });
    });
})(jQuery);
</script>

Answer 1

只需在document.ready之外写下你的文档。应该可以工作并评论你的“e.preventDefault（）;”。当我改变它时，它在小提琴上工作。

<script type="text/javascript">
        $(document).on('click', '#the-container a', function(e) {
            //e.preventDefault();
            var target = $(this).attr('href');
        });
</script>

Answer 2

jQuery事件处理程序附加到元素本身而不是选择器，如果在元素加载之前将事件处理程序实例化为元素选择器，则不会将侦听器附加到任何内容。

例如，这不起作用：

$.get('http://example.api.com',
    function(data){
        $node = $('<p></p>')
        $node.text(data)
        $node.addClass('elementToListen')
        $('body').append($node)
    })

// this gets executed before the ajax request completes. So no event
// listener gets attached

$('.elementToListen').on('click',function(e){'do somthing'})

因为在将任何元素添加到DOM之前已经设置了事件侦听器。

虽然这样可行：

$.get('http://example.api.com',
    function(data){
        $node = $('<p></p>')
        $node.text(data)
        $node.addClass('elementToListen')
        // here it is getting executed after the AJAX request in the
        // success callback
        $node.on('click',function(e){'do somthing'})
        $('body').append($node)
     })

jQuery事件未触发（高级）

2 个答案: