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

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

我已经研究了一些关于.toggle方法的其他问题，但它已被弃用，而且还不清楚最佳修复方法是什么。对于一种方法似乎没有多少共识。以下是我找到的其他线程供参考：

我想做的事

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

案例名称：关于提交

脚本：

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

$（文档）.ready（函数（）{
//事件触发器和操作
$（“#案例名称提交”）。在（'click'，function（）上{
$（'#case name'）.fadeOut（'fast'）.html(
'案例名称：关于'+$（'#输入请求人'）.val（）+'和'+$（'#输入响应人'）.val（）+'变更'
).fadeIn（“快速”）；
});
$（“#案例名称更改”）。在（'click'，function（）上{
$（'#case name'）.fadeOut（'fast'）.html(
“案例名称：关于提交和提交”
).fadeIn（“快速”）；
});
});

您拥有动态元素，因为您正在更改内容，所以请使用事件委派

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

$（文档）.ready（函数（）{
//事件触发器和操作
$（'案例名称'）。在（'单击'，'案例名称提交'）函数（）上{
$（“#案例名称”）.fadeOut（'fast'，function（）{
$（this.html）(
'案例名称：关于'+$（'#输入呈请者'）.val（）+'和'+$（'#输入响应者'）.val（）+'Change'）.fadeIn（'fast'）的问题
});
}).on（'单击'，'案例名称更改'，函数（）{
$（“#案例名称”）.fadeOut（'fast'，function（）{
$（this.html）(
“案例名称：关于并提交”），fadeIn（“快速”）
});
});
});

您还需要更新

fadeOut

complete处理程序中的html

演示：

---

您拥有动态元素，因为您正在更改内容，所以请使用事件委派

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

$（文档）.ready（函数（）{
//事件触发器和操作
$（'案例名称'）。在（'单击'，'案例名称提交'）函数（）上{
$（“#案例名称”）.fadeOut（'fast'，function（）{
$（this.html）(
'案例名称：关于'+$（'#输入呈请者'）.val（）+'和'+$（'#输入响应者'）.val（）+'Change'）.fadeIn（'fast'）的问题
});
}).on（'单击'，'案例名称更改'，函数（）{
$（“#案例名称”）.fadeOut（'fast'，function（）{
$（this.html）(
“案例名称：关于并提交”），fadeIn（“快速”）
});
});
});

您还需要更新

fadeOut

complete处理程序中的html

演示：

由于您的

#案例名称提交

和

#案例名称更改

已动态添加到DOM中，因此这两个元素无法使用所有事件，因此您需要在此处使用将单击事件附加到这些按钮：

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

$（文档）.ready（函数（）{
//事件触发器和操作
$（'案例名称'）。在（'单击'，'案例名称提交'，函数（）上）{
$（'#case name'）.fadeOut（'fast'）.html(
'案例名称：关于'+$（'#输入请求人'）.val（）+'和'+$（'#输入响应人'）.val（）+'变更'
).fadeIn（“快速”）；
});
$（'案例名称'）。在（'单击'，'案例名称更改'，函数（）上）{
$（'#case name'）.fadeOut（'fast'）.html(
“案例名称：关于提交和提交”
).fadeIn（“快速”）；
});
});

由于您的

#案例名称提交

和

#案例名称更改

已动态添加到DOM中，因此这两个元素无法使用所有事件，因此您需要在此处使用将单击事件附加到这些按钮：

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

$（文档）.ready（函数（）{
//事件触发器和操作
$（'案例名称'）。在（'单击'，'案例名称提交'，函数（）上）{
$（'#case name'）.fadeOut（'fast'）.html(
'案例名称：关于'+$（'#输入请求人'）.val（）+'和'+$（'#输入响应人'）.val（）+'变更'
).fadeIn（“快速”）；
});
$（'案例名称'）。在（'单击'，'案例名称更改'，函数（）上）{
$（'#case name'）.fadeOut（'fast'）.html(
“案例名称：关于提交和提交”
).fadeIn（“快速”）；
});
});

您需要查看[事件委派]（learn.jquery.com/events/event delegation/）非常酷的参考资料。我一定会查出来的。你需要看看[事件委派]（learn.jquery.com/events/event delegation/）非常酷的参考资料。我一定去看看。这正是我想做的。谢谢你的解释。如果我理解正确的话，我做错的事情之一就是没有同时包含父元素和子元素。由于事件委派适用于子事件，即使它们“现在存在或将来添加”，没有任何子事件实际上会否定事件处理。例如，$（'#myID'）。on（'click'，function（）…没有任何子元素，只有父元素#myID。这是正确的吗？不，不管您是否同时包含父元素和子元素。重要的是，页面加载时DOM中不存在您的元素（实际上，它在第一次单击按钮submit时起作用，因为submit按钮已添加到DOM中）