Question

我有以下代码：

<td colspan="10" id="letters">
   <span class="letter">A</span>
   <span class="letter">B</span>
   <span class="letter">C</span>
   <span class="letter">D</span>
</td>

使用以下jQuery：

$(".letter").on("click", function () {
    alert("test");
});

它不起作用。单击<span>不会触发Firefox调试器中的功能。当我的其他发现者，如：

$("#letters .letter").on("click", function () {...

..它也不起作用。我注意到这与jQuery的不一致。在我的页面中的一些元素上，我可以毫无问题地使用(class).on("click")函数，但是对于其他元素它不起作用。

Answer 1

也许您的范围已动态添加，请尝试在此处使用 event delegation ：

$('body').on('click', '.letter', function() {
    alert("test");
});

Answer 2

尝试在parent而不是child上绑定事件。

$('#letters').on("click", function () {
    alert("test");
});

Answer 3

试试这个Fiddle

活动委派：

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序。

$(document).on('click','.letter',function(){ alert("working");});

Answer 4

 $(document).ready(function(){
    $("span").click(function(){
        alert("test");
    });
});

jQuery的点击功能工作不一致

4 个答案: