javascript - 如何在 JQuery 添加的类上执行 .click()？

Question

我正在尝试在按钮上创建一个简单的编辑功能。当用户单击编辑按钮(包含以下类 btn btn-primary btn-edit change-btn)时，文本将更改为“保存”，输入上的只读属性将被删除元素，并将有一个 btn-success save-btn 类，同时删除 edit-btn btn-primary 类。这样当用户再次点击按钮时，它会更新并保存数据。虽然它删除并成功地更改了类，但 save-btn 功能即使有一个简单的“你好”警报也不会工作。这是我的代码:

$(document).ready( function() {

    $('.save-btn').click(function () {
          alert('hello');
    });

    $('.edit-btn').click(function () {
          $('.change-btn').removeClass('btn-primary edit-btn').addClass('btn-success save-btn').text('Save');
          $('#firstname, #lastname').removeAttr('readonly');
    });
});

我这里执行的javascript/jquery有问题吗？

Answer 1

它不起作用，因为当您添加 save-btn 单击处理程序时，该类尚未在按钮上。尝试使用委托(delegate)。

$(document).ready( function() {

    $(document).on('click', '.save-btn', function () {
          alert('hello im clicked');
    });

    $(document).on('click', '.edit-btn', function () {
          $('.change-btn').removeClass('btn-primary edit-btn').addClass('btn-success save-btn').text('Save');
          $('#firstname, #lastname').removeAttr('readonly');
    });
});

您可以使用按钮的父级而不是文档。