使用.on时不会触发？

Question

我在这里期望的是点击课程时触发的功能，但它不会发生！ a.button是动态创建的，但是当页面被完全加载时，它就在页面上了！

任何想法为什么？

HTML：

<a class="btn btn-success useImg"> 
      <i class="fa-icon-plus"></i> 
      <span>Use</span> 
    </a> 

的Jquery：

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

Answer 1

您需要点击事件进一步增加另一个元素了DOM树，然后筛选到您的锚元素上工作。这将会激发.useImg类的任何元素，包括动态添加的元素。

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

见http://api.jquery.com/on/

确保您缠绕代码jQuery的DOM已准备就绪事件，以确保该页面完全加载。例如

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

Answer 2

尝试，当文档准备

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

Answer 3

$(document).ready(
    $('.useImg').click(function(){ alert(test); }) 
) 

Answer 4

你的代码在一个独立的jsfiddle完全没有问题，你可以看到here。

因此，您必须对这些问题的一个：

1. 您要安装事件处理程序之前，DOM是准备或对象存在之前。
2. 您的JavaScript中有错误，导致无法安装事件处理程序。
3. 页面或HTML中的实际代码与您在问题中放置的代码不同，因此存在未披露的其他问题。

您可以通过将代码放在$(document).ready()处理程序中或使用委托事件处理来防止第一个项目。

对于第二项，您必须检查您的浏览器错误控制台的脚本错误。

Answer 5

尝试使用$("body").on("click", ".useImg", function(){ alert("test"); });

，建议您使用最新的jQuery的lib http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js