Question

我试图在jsfiddle中做一些表面上看起来很简单的事情而且它不起作用。基本上我有一个h1 html标签，上面有＃34; me＆＃34;以及一个带有＆＃34; poo＆＃34;的按钮。第一次点击工作，我的CSS颜色改变，但第二次点击不起作用？

$(".poo").click(function(e){
   e.preventDefault(); 
   $(".me").css("color","green");
   var haha = $("<button>Click Me!!!</button>");
   $(this).after(haha);
   $(haha).addClass("changer");
   $(this).hide();

});
$(".changer").click(function(e){
    e.preventDefault();
   $(".me").css("color","black");
   $(this).hide();
});

Answer 1

changer点击处理程序在元素存在之前绑定。请尝试使用$.on方法。

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

$('body').on('click', '.changer', function() {...})

这是有效的，因为事件处理程序绑定到页面上已存在的文档body。当正文中的任何地方发生单击时，jQuery将检查被点击的元素是否与选择器.changer匹配，如果是，则执行回调。

或者，您可以在第一个回调中绑定$('.changer').click事件。

Answer 2

将第二次点击绑定到父元素：

$(document).on('click', '.changer', function() {
//function here
});

Answer 3

更新小提琴：http://jsfiddle.net/0yodg7gb/7/

  $(".poo").click(function(e){
       e.preventDefault(); 
       $(".me").css("color","green");
        var haha = $("<button>Click Me!!!</button>").addClass('changer');
        $(this).after(haha);
        $(haha).addClass("changer");
        $(this).hide();
        bindClick();
     });

function bindClick(){
$(".changer").bind('click',function(e){
        e.preventDefault();
       $(".me").css("color","black");
       $(this).hide();
});
}

第二个jQuery按钮单击没有触发

3 个答案: