Javascript 在jquery中多次调用click事件

我有以下代码。在这段代码中，我首先将

输入

字段和

按钮

添加到

#容器

。然后我将单击事件附加到

按钮。确认。当第一次单击它时，它调用
initConfirm
方法。在
initConfirm
中，我将按钮的文本更改为
Show
，删除类
confirm
，并将类
Show
添加到此按钮。然后我将另一个click事件附加到
按钮上。show
并在单击时调用
initShow
方法。在
initShow
方法中，我只是记录了一条消息

问题

此代码的问题是当我第一次单击
按钮时。确认
按钮，它显示，它将按钮的文本更改为
显示
，并将类从
确认
更改为
显示
，并将单击事件附加到
按钮。显示
。它还会注销一次
initConfirm
。这是正确的。现在，当我用class
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');
    }
})();

（函数（）{
$（'#container'）。追加（'Confirm'）；
$（'.confirm'）。在（'click'，initConfirm'）上；
函数initConfirm（）{
$（'.confirm'）.text（'Show'）；
$（'.confirm'）.removeClass（'confirm'）.addClass（'show'）；
$（'.show'）。在（'click'，initShow'）上；
console.log（'initConfirm'）；
}
函数initShow（）{
log（'initShow'）；
}
})();

这是JSFIDLE

单击
事件，调用
的次数与调用
initConfirm（）
的次数相同

移动

超出
initConfirm（）

代码：

$（“#容器”）.append（'Confirm'）；
$（'.confirm'）。在（'click'，initConfirm'）上；
$（'.show'）。在（'click'，initShow'）上；
函数initConfirm（）{
$（'.confirm'）.text（'Show'）；
$（'.confirm'）.removeClass（'confirm'）.addClass（'show'）；
console.log（'initConfirm'）；
}
函数initShow（）{
log（'initShow'）；
}

你应该利用授权：


问题是
initConfirm
仍然连接到按钮上。我已经做了必要的更改：


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

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

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