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

Posted 2023-05-09

【中文标题】如何在 JQuery 中添加的类上执行 .click()？

【英文标题】：How to do .click() on added class in JQuery?

【发布时间】：2015-05-24 14:17:33

【问题描述】：

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

$(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 有什么问题吗？

【问题讨论】：

你面临什么问题？你能摆弄你的代码吗？

【参考方案1】：

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

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

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