Javascript jQuery事件未触发（高级）

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

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

我甚至用
（函数（$）{}）（jQuery）包装了我的以确保没有冲突；为了确保一切都能按正确的顺序运行/加载，我还有
$（document）.ready（function（）{}）

现在，该事件本来打算在
页面A
上运行，并且运行良好，但当我制作并尝试在
页面B
上运行时，它对主容器具有相同的
id
，并且具有相同的子html，它不起作用

所以我做了一些实验/测试，两种方法都很有效

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

（2） 在同一个
.js
脚本中，我添加了完全相同的事件侦听器，只使用
console.log
，但将其包装在
setTimeout（function（）{}，5000）中，5秒钟后，我点击了目标元素，它成功了

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

此外，我的html元素不是动态加载的，而是通过服务器端
PHP
生成的页面加载

编辑：
这些信息可能有用


在magento跑步
js脚本被包含在
头上（这就是
$（文档）的原因。准备好的
非常重要）

jquery脚本在我的自定义脚本之前加载
A页和B页在不同的页面上
它不是ajax生成的元素，也不是动态添加的js/jquery元素；它是通过
php
code

（3） 我的第三个实验也很有效。但如果可能的话，我不希望这成为我的解决方案，也不希望使用javascript内联
onclick
。因此，我在
php
文件中添加了一个全新的脚本块，其中包含页面的“部分”，使用完全相同的代码，并且可以正常工作。但问题是，我现在有两个相同的事件侦听器

现在我有了两个相同的事件监听器（不管另一个是否工作-仅适用于B页），一个来自内部（内部），一个来自外部
.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>


（函数（$）{
$（文档）.ready（函数（）{
$（文档）。在（'单击'，'容器a'，函数（e）上{
e、 预防默认值（）；
var target=$（this.attr（'href'）；
});
});
})（jQuery）；
只需在文档外部编写document.on即可。准备好了，应该可以工作并注释您的“e.preventDefault（）；”。我换小提琴时，它在小提琴上起作用了

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


$（文档）。在（'单击'，'容器a'，函数（e）上{
//e、 预防默认值（）；
var target=$（this.attr（'href'）；
});
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'})

$.get（'http://example.api.com',
功能（数据）{
$node=$（“
”）
$node.text（数据）
$node.addClass（'elementToListen'）
$（'body'）。追加（$node）
})
//这将在ajax请求完成之前执行。所以没有任何事件
//侦听器被连接
$（'.elementToListen'）。on（'click'，函数（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)
     })

$.get（'http://example.api.com',
功能（数据）{
$node=$（“
”）
$node.text（数据）
$node.addClass（'elementToListen'）
//在这里，它是在
//成功回调
$node.on（'click'，函数（e）{'do somthing'}）
$（'body'）。追加（$node）
})
在第一个示例中使用jQuery符号，在第二个示例中使用$…检查控制台是否有错误
（函数（$）{}）（jQuery）=
jQuery（文档）.ready（函数（）{}）
@IvanKaraman在我的第一个示例中，我通过控制台使用
jQuery
，因为我知道
$
不起作用。还有，没有错误。您是否有一个链接无法共享？很难看出哪里出了问题，pageA和pageB都是通过Javascript动态添加的吗？（无新页面加载）。因为有些库设置了隐藏pageA而不是立即删除它，所以ID仍然在pageA的页面中。