Question

使用on时，这个简单的jQuery对我不起作用。还有另一种方法可以使用on吗？ on class无法使用jQuery JavaScript Library v1.8.3。我正在使用live()

我正在尝试将一些旧代码从on()移到$(".subUser").on("click",function() { alert("The paragraph was clicked."); }); <div class="container"> <div><i class="icon-add subUser"></i></div> </div>。

{{1}}

Answer 1

如果您不动态添加类subUser的元素，那么您的代码似乎没问题。您可能需要放入document.ready

$(document).ready(function(){
  $(".subUser").on("click",function() {
     alert("The paragraph was clicked.");  
  });
});

如果要动态添加元素，则需要事件委派。您必须使用选择器中的父元素，该元素在您的绑定代码执行时出现，或者您可以使用文档或正文。

$(document).ready(function(){
  $(document).on("click", ".subUser", function() {
     alert("The paragraph was clicked.");  
  });
});

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

Answer 2

您可以更改为：

$(".container").on("click", ".subUser" ,function() {

当您将代码从.live()移动到.on()时，您必须将事件委托给dom更改之前可用的静态父代。

所以在你的情况下似乎.container类在那个时间点可用，然后你必须委托给你，或者你可以直接委托给$(document)因为文件总是可以委派事件（ this might be little slower 的）。

Answer 3

检查一下如何替换代码

        // Bind
        $( "#members li a" ).on( "click", function( e ) {} );
        $( "#members li a" ).bind( "click", function( e ) {} );

        // Live
        $( document ).on( "click", "#members li a", function( e ) {} );
        $( "#members li a" ).live( "click", function( e ) {} );

        // Delegate
        $( "#members" ).on( "click", "li a", function( e ) {} );
        $( "#members" ).delegate( "li a", "click", function( e ) {} );

参考

http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html

jQuery on不适用于类

3 个答案: