Jquery $（文档）。在（”单击“…不工作？

我会犯一个众所周知的错误吗

我有一个使用.on（）的脚本，因为元素是动态生成的，它不工作。为了测试它，我用动态元素的wrap替换了选择器，它是静态的，但仍然不工作！当我切换到纯旧时。单击以获得wrap，它工作了。
（这显然不适用于动态元素，重要的元素。）

这是有效的：

$("#test-element").click(function() {
    alert("click");
});

$(document).on("click","#test-element",function() {
    alert("click");
});

这不是：

$("#test-element").click(function() {
    alert("click");
});

$(document).on("click","#test-element",function() {
    alert("click");
});

更新：

$("#test-element").click(function() {
    alert("click");
});

$(document).on("click","#test-element",function() {
    alert("click");
});

我用鼠标右键点击Chrome中的“Inspect Element”（检查元素）来进行双重检查，然后点击事件开始工作。我刷新后，它不工作了，检查了元素，然后它工作了。这是什么意思？

试试这个：

$("#test-element").on("click" ,function() {
    alert("click");
});

文档方式也很奇怪。如果用于类选择器，这对我来说是有意义的，但是对于id，可能只是在那里进行了无用的DOM遍历。 对于id选择器，您可以立即获得该元素。

此操作：

<div id="start-element">Click Me</div>

$(document).on("click","#test-element",function() {
    alert("click");
});

$(document).on("click","#start-element",function() {
    $(this).attr("id", "test-element");
});

点击我
$（文档）。在（“单击”，“测试元素”，函数（）上）{
警报（“点击”）；
});
$（文档）。在（“单击”，“开始元素”，函数（）上）{
$（this.attr（“id”，“测试元素”）；
});

---

以下是您正在使用绑定到文档的正确语法来侦听id为=“test element”的元素的单击事件

由于以下原因之一，它可能不起作用：

• 不使用jQuery的最新版本
• 没有将代码包装到DOM ready中
• 或者，您正在执行的操作导致事件不会向文档上的侦听器冒泡

要捕获在声明事件侦听器后创建的元素上的事件，应绑定到父元素或层次结构中更高的元素

例如：

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

$（文档）.ready（函数（）{
//这将起作用，因为我们正在收听“文件”，
//单击ID为#test element的元素
$（文档）。在（“单击”，“测试元素”，函数（）上）{
警报（“单击绑定到文档侦听#测试元素”）；
});
//这将不起作用，因为还没有“测试元素”
$（“#测试元素”）。在（“单击”，函数（）上）{
警报（“单击直接绑定到#测试元素”）；
});
//创建动态元素“#测试元素”
$（'body'）。追加（'Click mee'）；
});

在本例中，仅会触发“绑定到文档”警报

---

您的代码应该可以工作，但我知道答案对您没有帮助。您可以看到一个工作示例

Jquery：

$(document).on('click','#test-element',function(){
    alert("You clicked the element with and ID of 'test-element'");
});

正如已经有人指出的，您使用的是ID而不是类。如果页面上有多个ID为的元素，那么jquery将只返回第一个ID为的元素。不会有任何错误，因为它就是这样工作的。如果这是问题所在，那么您会注意到click事件适用于第一个

测试元素nt

，但不适用于以下任何情况

如果这不能准确描述问题的症状，则可能是您的选择器错误。您的更新使我相信这是因为检查了一个元素，然后再次单击页面并触发单击。如果您将事件侦听器放在实际的

文档上而不是
测试元素
。如果是这样，当您单击关闭文档并重新打开（如从开发人员窗口返回文档）时，事件将触发。如果是这种情况，您还会注意到，如果在两个不同选项卡之间单击，则会触发单击事件（因为它们是两个不同的
文档
s，因此您要单击文档

如果这两个都不是答案，发布HTML将大大有助于解决问题。
一篇旧文章，但我喜欢分享，因为我有同样的案例，但我最终知道了问题：

问题是：我们使一个函数与指定的HTML元素一起工作，但与此函数相关的HTML元素尚未创建（因为该元素是动态生成的）。要使其工作，我们应该在创建元素的同时创建该函数。先创建元素，然后再创建与其相关的函数

简单地说，函数只对在它之前创建的元素（他）起作用。任何动态创建的元素都意味着在他之后

但请检查未注意上述情况的样品：

<div class="btn-list" id="selected-country"></div>

或者您可以使用body-like：

$('body').on('click','.btn-map', function(){ 
            var datacountry = $(this).data('country'); console.log(datacountry);
        });

与不起作用的情况相比：

$(document).ready(function() {     
$('.btn-map').on("click", function() { 
        var datacountry = $(this).data('country'); alert(datacountry);
    });
});

如果此代码在document ready（文档准备就绪）下也不起作用，希望它会有所帮助，很可能是您在js文件中的某个位置为该按钮指定了一个
return false；
，如果是按钮，请尝试将其更改为a、span、anchor或div，并测试它是否起作用

$(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
});

您是否创建了多个具有相同ID的元素？仅发布jQuery而不发布相关HTML会使您很难获得帮助。您好，请检查您正在使用的jQuery版本，
：）
或轻弹小提琴我可能会帮你，你的代码应该是有效的。在jquery 1.7中添加了
on
函数，请确保你有一个最新版本。编辑：你的第二个示例使用最新的1.x版本的jquery：这与
$（“#test element”）有何不同。单击（function（）{
？你必须使用.on（）要将事件绑定到动态生成的DOM，请执行与绑定的任何操作。单击（）当文档准备就绪时，将尝试绑定，如果dom不存在，则不会发生任何事情。但是在不使用选择器的情况下使用
.on
与直接在其上应用单击事件相同。这不是问题的正确答案。这将直接绑定到元素，因此在元素nt是动态生成的。我实际上已经阅读了文档，但是关于性能的部分实际上与此无关