Jquery .单击功能仅在父级内部工作。单击功能不能在父级外部执行

我一直在开发一个应用程序，它允许使用jquery编辑表行。原来的帖子在这里

应用程序的流程是：

表已加载

“编辑”按钮（带有类

editbn

）出现在每一行上

单击“编辑”按钮可删除类

editBtn

，并添加类

saveBtn

。文本也从“编辑”更改为“保存”

其目的是，当单击Save按钮时，我可以执行ajax请求

但是，如果要单击的

.saveBtn

的jquery位于原始

中，我只能将其作为目标。单击
.editBtn
上的
函数。例如，这是可行的：

$（'.editBtn'）。单击（函数（）{
var$button=$（this）.addClass（'save'）.text（'save'）；
var$tr=$button.closest（'tr'）；
变量id=$tr.data（'id'）；
var$td=$tr.find（'td:first'）；
var$td2=$tr.find（'td:n第n个子项（2）'）；
$td.html（“”）；
$td2.html（'Save'）；
$（'.saveBtn'）。单击（函数（）{
console.log（'savebtn'）；
});
});

但这不起作用：

$（'.editBtn'）。单击（函数（）{
var$button=$（this）.addClass（'save'）.text（'save'）；
var$tr=$button.closest（'tr'）；
变量id=$tr.data（'id'）；
var$td=$tr.find（'td:first'）；
var$td2=$tr.find（'td:n第n个子项（2）'）；
$td.html（“”）；
$td2.html（'Save'）；
});
//已移到$（'.editBtn'）之外。单击
$（'.saveBtn'）。单击（函数（）{
console.log（'savebtn'）；
});

这是为什么？
它不起作用，因为您正在追加。单击后保存BTN事件为绑定。您必须在单击时使用文档。
这将有助于：-

$('.editBtn').click(function() {
    var $button = $(this).addClass('save').text('Save');
    var $tr = $button.closest('tr');
    var id = $tr.data('id');
    var $td = $tr.find('td:first');
    var $td2 = $tr.find('td:nth-child(2)');

    $td.html('<input value="' + $td.text() + '" />');
    $td2.html('<button class="btn btn-primary btn-success saveBtn">Save</button>');

});

// Moved outside $('.editBtn').click
    $(document).on('click', '.saveBtn', function(){ 
        console.log('savebtn');
    });

$（'.editBtn'）。单击（函数（）{
var$button=$（this）.addClass（'save'）.text（'save'）；
var$tr=$button.closest（'tr'）；
变量id=$tr.data（'id'）；
var$td=$tr.find（'td:first'）；
var$td2=$tr.find（'td:n第n个子项（2）'）；
$td.html（“”）；
$td2.html（'Save'）；
});
//已移到$（'.editBtn'）之外。单击
$（文档）.on（'click'，'.saveBtn'，function（）{
console.log（'savebtn'）；
});
更新您的代码以使用on（“click@，function（）…）格式，因为这适用于动态元素，其中。click（）没有。这是@SatPal发给你的副本的要点。@SatPal我不同意将其标记为副本。虽然我可以看到与那篇文章和我的文章有相似之处，但无论如何我都无法通过搜索找到它。下面给出的答案对这种情况很有帮助。@Andy，这是副本当您动态创建时，链接问题中提供了解决方案。
$('.editBtn').click(function() {
    var $button = $(this).addClass('save').text('Save');
    var $tr = $button.closest('tr');
    var id = $tr.data('id');
    var $td = $tr.find('td:first');
    var $td2 = $tr.find('td:nth-child(2)');

    $td.html('<input value="' + $td.text() + '" />');
    $td2.html('<button class="btn btn-primary btn-success saveBtn">Save</button>');

});

// Moved outside $('.editBtn').click
    $('.saveBtn').click(function() {
        console.log('savebtn');
    });

$('.editBtn').click(function() {
    var $button = $(this).addClass('save').text('Save');
    var $tr = $button.closest('tr');
    var id = $tr.data('id');
    var $td = $tr.find('td:first');
    var $td2 = $tr.find('td:nth-child(2)');

    $td.html('<input value="' + $td.text() + '" />');
    $td2.html('<button class="btn btn-primary btn-success saveBtn">Save</button>');

});

// Moved outside $('.editBtn').click
    $(document).on('click', '.saveBtn', function(){ 
        console.log('savebtn');
    });