在jquery中多次調用點擊事件

Question

我有以下代碼。在此代碼中，首先我將input字段和button添加到#container。然後我將點擊事件附加到button.confirm。當它第一次被點擊時，它會調用initConfirm方法。在initConfirm內部，我將一個按鈕的文本更改爲Show，並刪除類confirm，並將類show添加到此按鈕。然後我將另一個點擊事件附加到button.show，並在點擊後調用initShow方法。 initShow方法內我只記錄一條消息。

問題

的問題這段代碼是當我在button.confirm按鈕點擊首次，這表明，它改變了按鈕的文字show和confirm類變爲show並附點擊活動button.show。它也登出initConfirm一次。哪個是對的。現在當我點擊帶類show的按鈕時，再次調用initConfirm方法，然後調用initShow方法。當我再次點擊這個按鈕。然後它再次首先調用initConfirm，然後再調用initShow兩次。當我多次點擊此方法時，這種情況會持續下去。以下是我的控制檯的屏幕截圖。

我想

我想這個代碼，以這樣的工作。當用戶第一次點擊.confirm按鈕時，它應該調用initConfirm方法。當用戶點擊.show按鈕時，它應該調用initShow方法，之後每次點擊.show按鈕時應該保持調用initShow方法一次。

這裏是我的代碼

(function() { 
    $('#container').append('<input type="text"><button class="confirm" type="button">Confirm</button>'); 

    $('.confirm').on('click', initConfirm); 

    function initConfirm() { 
     $('.confirm').text('Show'); 
     $('.confirm').removeClass('confirm').addClass('show'); 
     $('.show').on('click', initShow); 
     console.log('initConfirm'); 
    } 

    function initShow() { 
     console.log('initShow'); 
    } 
})(); 

這裏的jsfiddle

JSFIDDLE

Answer 1

你應該採取委託的優勢：

DEMO

function initConfirm() { 
    $(this).text('Show') 
     .toggleClass('confirm show'); 
    console.log('initConfirm'); 
} 

function initShow() { 
    console.log('initShow'); 
} 
$('#container').on('click', '.confirm', initConfirm) 
    .on('click', '.show', initShow); 

Answer 2

click事件.show被稱爲多次initConfirm()被調用。

移動

$('.show').on('click', initShow); 

出initConfirm()。

代碼：

$('#container').append('<input type="text"><button class="confirm" type="button">Confirm</button>'); 

$('.confirm').on('click', initConfirm); 
$('.show').on('click', initShow); 

function initConfirm() { 
    $('.confirm').text('Show'); 
    $('.confirm').removeClass('confirm').addClass('show'); 
    console.log('initConfirm'); 
} 

function initShow() { 
    console.log('initShow'); 
} 

Updated fiddle here.

Answer 3

的問題是initConfirm仍連接到按鈕。我已經做了所需的更改：

http://jsfiddle.net/cfS2x/5/