click event disable other click events

Question

這是我的問題。我有這樣的代碼：

var state1 = $('.a').clone(); 
    $('.c').click(function(){ 
     $('.a').html('<div class="b"></div>'); 

    }); 
    $('.b').click(function(){ 
     $('.a').replaceWith(state1); 
    }); 

，這是HTML

<div class="a"><img class="c"></div> 

當我在圖像C點擊，它的工作原理，但B單擊功能將無法正常工作。我試圖把c點擊功能放在c點擊。所以它的工作，但只是第一次。感謝您的幫助

Answer 1

功能需要在每個迭代之後重新關聯。試試下面的代碼

$('.c').click(function() { 
    ChangeToB(); 
}); 


function ChangeToB() { 
    var state1 = $('.a').clone(); 
    $('.a').html('<div class="b"></div>'); 

    $('.b').on('click', function() { 
     $('.a').replaceWith(state1); 
     $('.c').click(function() { 
      ChangeToB(); 
     }); 
    }); 
} 

JsFiddle

Answer 2

您在元素存在之前附加了click事件。嘗試使用jQuery on函數。

$('body').on('click', '.c', function(){ 
    $('.a').html('<div class="b"></div>'); 
}); 

$('body').on('click', '.b', function(){ 
    $('.a').replaceWith(state1); 
}); 

該方法允許您附加將來存在的元素的click事件。

Answer 3

這不起作用，因爲您在插入到DOM之前將事件附加到「.b」。

嘗試使用委託事件。

var state1 = $('.a').clone(); 
    $(document).on('click', '.c', (function(){ 
     $('.a').html('<div class="b"></div>'); 
    }); 

    $(document).on('click', '.b', (function(){ 
     $('.a').replaceWith(state1); 
    }); 

Answer 4

b是一個動態創建的元素，所以點擊不會被註冊到新元素。 這可以解決問題。

var state1 = $('.a').clone(); 
    $('.c').click(function(){ 
     $('.a').html('<div class="b"></div>'); 

    $('.b').on('click',function(){ 
     $('.a').replaceWith(state1); 
    }); 
    }); 

http://jsfiddle.net/mw73enz8/11/