动态更改按钮的 class 名称后，onClick 函数将不起作用

Question

我有一个按钮，一旦单击它就会向其他两个按钮添加一个 class 并从两个按钮中删除一个 class。该按钮还更改隐藏 HTML 输入

的值

这是我的三个按钮

//Main button
<button type="submit" id="estimate-button1" 
class="btn btn-default btn-submit request-button">
        Get Estimate
</button>

//Button that class is changed
<button type="submit" class="btn btn-default btn-submit estimate-button">
    Get Estimate
</button>

//Button that class is changed
<button type="submit" class="btn btn-default btn-submit estimate-button">
    Get Estimate
</button>

下面两个按钮是一样的。它们只是放置在网页的不同部分。

当按下第一个按钮 main button 时，它会从其他两个按钮中删除 class estimate-button，然后将 class request-button 添加到class 都是。这部分效果很好，但这是我遇到问题的地方。

我有一组 onClick 函数，这些函数在单击上述按钮之一时激活。这就是它们，

$(document).ready(function() {
   $( ".request-button" ).click(function() {
      $('#method').val("request");
   });
   $( "#estimate-button1" ).click(function() {
      $('#method').val("estimate");
   });
   $( ".estimate-button" ).click(function() {
      $('#method').val("estimate");
   });
});

当我从按钮中动态删除 class estimate-button，然后添加 class request-button，然后单击如下所示的新按钮时，

<button type="submit" class="btn btn-default btn-submit request-button">
    Send Request
</button>

不激活对应的onClick功能。很简单，什么都不做。这是为什么？

Answer 1

您需要使用委托事件让它与现在和将来匹配选择器的元素一起工作。

将您的代码更改为：

$(document).ready(function() {
   $('body').on('click', ".request-button", function() {
      $('#method').val("request");
   });
   $('body').on('click', "#estimate-button1", function() {
      $('#method').val("estimate");
   });
   $('body').on('click', ".estimate-button", function() {
      $('#method').val("estimate");
   });
});

Answer 2

使用jquery委托方法解决这个动态内容问题

$(document).ready(function() {
   $( document). on('click', ".request-button" ,function() {
      $('#method').val("request");
   });
    $( document). on('click',"#estimate-button1" ,function() {
      $('#method').val("estimate");
   });
    $( document). on('click',".estimate-button",function() {
      $('#method').val("estimate");
   });
});

Answer 3

有一些与event delegation since you change the dom class name dynamically. Try using .on()函数相关的代码如下。

$( document ).on('click','.request-button',function() {       
   $('#method').val("request"); 
});

动态更改按钮的 class 名称后，onClick 函数将不起作用

onClick function won't work after dynamically changing button's class name

html

jquery

button