在jquery中多次调用click事件

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方法，之后每次点击initShow按钮时都应该继续调用.show方法。

这是我的代码

(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的{​​{1}}事件被调用.show被调用多次。

移动

initConfirm()

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

代码：

initConfirm()

Updated fiddle here.

Answer 3

问题是initConfirm仍然附在按钮上。我做了必要的修改：

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