第二次点击jQuery按钮是't开火

Second jQuery button click isn't firing

本文关键字：开火 jQuery 按钮 第二次      更新时间：2023-09-26

我试图在jsfiddle中做一些表面上很简单的事情，但它不起作用。从本质上讲，我有一个类为"me"的h1 html标签和类为"poo"的按钮。第一次点击有效，我的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();
});

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

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

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

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

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

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

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

更新fiddle：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();
});
}
相关文章：