第二個jQuery按鈕點擊不發射

Question

我想在jsfiddle中做一些表面上很簡單的事情，但它不起作用。基本上，我有一個類「我」的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(); 
}); 

Answer 1

綁定第二次點擊父元素：

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

Answer 2

changer點擊處理程序在元素存在之前被綁定。請嘗試使用$.on方法。

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

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

這工作，因爲事件處理程序綁定到文件body，已經存在在頁面上。當在主體的任何位置點擊時，jQuery將檢查點擊的元素是否與選擇器.changer相匹配，如果是，則執行回調。

或者，您可以在第一個回調中綁定$('.changer').click事件。

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(); 
}); 
}