Question

我可以在这里犯一个众所周知的错误吗？

我有一个使用.on（）的脚本，因为一个元素是动态生成的，而且它不起作用。为了测试它，我用动态元素的换行替换了选择器，这是静态的，它仍然无法正常工作！当我切换到普通的.click包装时，它可以工作（这显然不适用于动态元素，重要的是。）

这有效：

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

这不是：

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

更新：

我右键单击并在Chrome中执行“检查元素”，只需仔细检查一下，然后点击事件就可以了。我刷新，它没有工作，检查元素，然后它工作。这是什么意思？

Answer 1

您正在使用正确的语法绑定到文档，以侦听id =“test-element”的元素的click事件。

由于其中一个原因，它可能无法正常工作：

不使用最新版本的jQuery
未将代码包装在DOM中
或者您正在做的事情导致事件不会冒泡到文档上的侦听器。

要捕获在 AFTER 声明事件侦听器时创建的元素上的事件 - 您应该绑定到父元素或层次结构中较高的元素。

例如：

$(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>');
});

在此示例中，仅触发“绑定到文档”警报。

JSFiddle with jQuery 1.9.1

Answer 2

您的代码应该有效，但我知道答案对您没有帮助。您可以看到一个有效的示例here (jsfiddle)。

Jquery的：

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

正如有人已经指出的那样，你使用的是ID而不是类。如果页面上有一个带有ID的元素，那么jquery将仅返回具有该ID的第一个元素。不会有任何错误，因为它是如何工作的。如果这是问题，那么您会注意到点击事件适用于第一个test-element，但不适用于随后的任何事件。

如果这不能准确描述问题的症状，那么您的选择器可能是错误的。您的更新让我相信这是因为检查元素然后再次单击页面并触发单击。如果您将事件监听器放在实际document而不是test-element上，可能导致此问题的原因。如果是这样，当您单击文档并重新打开时（如从开发人员窗口返回到文档），将触发事件。如果是这种情况，您还会注意到，如果您在两个不同的标签之间点击，则会触发点击事件（因为它们是两个不同的document，因此您点击了该文档。

如果这些都不是答案，那么发布HTML将大大有助于搞清楚。

Answer 3

一个旧帖子，但我喜欢分享，因为我有同样的情况，但我终于知道了问题：

问题是：我们创建一个函数来处理指定的HTML元素，但是尚未创建与此函数相关的HTML元素（因为该元素是动态生成的）。为了使它工作，我们应该在创建元素的同时创建函数。首先是元素而不是与它相关的函数。

简单地说，一个函数只适用于在它之前创建的元素（他）。动态创建的任何元素都意味着他。

但请检查这个没有注意上述情况的样本：

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

动态附加：

<button class="btn-map" data-country="'+country+'">'+ country+' </button>

单击按钮

，此功能正常

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

或者你可以使用像：

这样的身体

$('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);
    });
});

希望它会有所帮助

Answer 4

试试这个：

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

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

Answer 5

这有效：

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

以下是Fiddle

$（文件）.on（“点击”......不工作？

5 个答案: