$(文件).on("点击"......不工作？

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中
• 或者你正在做的事情导致事件不会冒泡到文档上的监听器.

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

例如:

$(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与jQuery 1.9.1

Answer 2

你的代码应该可行,但我知道答案对你没有帮助.你可以在这里看到一个有效的例子(jsfiddle).

jQuery的:

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

正如有人已经指出的那样,您使用的是ID而不是类.如果页面上有一个带有ID的元素,那么jquery将仅返回具有该ID的第一个元素.不会有任何错误,因为它是如何工作的.如果这是问题,那么您会注意到click事件适用于第一个,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 像：

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

希望它会有所帮助