JQuery - 使用 on 方法在 html 值之间切换

Question

这段代码的重点是在 div 内的两个版本的 innerHTML 之间来回切换，使用输入值（或默认值）并切换按钮的显示方式。它不工作。第一次点击后，“新建”按钮失效。该 div 应该恢复到具有空白输入字段的原始显示。

我已经查看了有关 .toggle 方法的其他一些问题，但它已被弃用，目前还不清楚最好的解决方法是什么。在方法上似乎没有太多共识。以下是我找到的其他线程供参考：

• JQuery Button Click Not Working
• Toggling Click Handlers in Javascript
• Toggle Between Two Different Click Events

Here is a jsfiddle example 我正在尝试做的事情。

HTML 代码：

<div id="case-name">Case Name:&nbsp;In the Matter of <input id="input-petitioner" type="text" placeholder="Petitioner" maxlength="50"></input> and <input id="input-respondent" type="text" placeholder="Respondent" maxlength="50">&nbsp;<button id="case-name-submit" type="button" value="none">Submit</button></div>

脚本：

$(document).ready(function(){
//EVENT TRIGGERS AND ACTIONS
$('#case-name-submit').on('click', function(){
    $('#case-name').fadeOut('fast').html(
    'Case Name:&nbsp;In the Matter of ' + $('#input-petitioner').val() + ' and ' +  $('#input-respondent').val() + '&nbsp;<button id="case-name-change" type="button" value="none">Change</button>'
    ).fadeIn('fast');
});
$('#case-name-change').on('click', function(){
    $('#case-name').fadeOut('fast').html(
    'Case Name:&nbsp;In the Matter of <input id="input-petitioner" type="text" placeholder="Petitioner" maxlength="50"></input> and <input id="input-respondent" type="text" placeholder="Respondent" maxlength="50">&nbsp;<button id="case-name-submit" type="button" value="none">Submit</button>'
    ).fadeIn('fast');
});
});

Answer 1

由于你的#case-name-submit和#case-name-change已经被动态添加到DOM中了，所以这两个元素不能使用所有的事件，所以这里需要使用event delegation来附加点击这些按钮的事件：

事件委托允许我们将单个事件侦听器附加到 父元素，将为匹配选择器的所有子元素触发， 这些孩子是现在存在还是将来添加。

$(document).ready(function(){
//EVENT TRIGGERS AND ACTIONS
$('#case-name').on('click', '#case-name-submit', function(){
        $('#case-name').fadeOut('fast').html(
        'Case Name:&nbsp;In the Matter of ' + $('#input-petitioner').val() + ' and ' + $('#input-respondent').val() + '&nbsp;<button id="case-name-change" type="button" value="none">Change</button>'
        ).fadeIn('fast');
    });
$('#case-name').on('click','#case-name-change', function(){
        $('#case-name').fadeOut('fast').html(
        'Case Name:&nbsp;In the Matter of <input id="input-petitioner" type="text" placeholder="Petitioner" maxlength="50"></input> and <input id="input-respondent" type="text" placeholder="Respondent" maxlength="50">&nbsp;<button id="case-name-submit" type="button" value="none">Submit</button>'
        ).fadeIn('fast');
    });
});

Answer 2

您正在使用动态元素，因为您正在更改内容，因此请使用事件委托

$(document).ready(function () {
    //EVENT TRIGGERS AND ACTIONS
    $('#case-name').on('click', '#case-name-submit', function () {
        $('#case-name').fadeOut('fast', function () {
            $(this).html(
                'Case Name:&nbsp;In the Matter of ' + $('#input-petitioner').val() + ' and ' + $('#input-respondent').val() + '&nbsp;<button id="case-name-change" type="button" value="none">Change</button>').fadeIn('fast')
        });
    }).on('click', '#case-name-change', function () {
        $('#case-name').fadeOut('fast', function () {
            $(this).html(
                'Case Name:&nbsp;In the Matter of <input id="input-petitioner" type="text" placeholder="Petitioner" maxlength="50"></input> and <input id="input-respondent" type="text" placeholder="Respondent" maxlength="50">&nbsp;<button id="case-name-submit" type="button" value="none">Submit</button>').fadeIn('fast')
        });
    });
});

您还需要更新 fadeOut 完整处理程序中的 html

演示：Fiddle

An updated version