Question

我有一个按钮，一旦点击它就会向另外两个按钮添加一个类，并从两个按钮中删除一个类。该按钮还会更改隐藏的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时，它会从其他两个按钮中删除类estimate-button，然后将类request-button添加到这两个类中。这部分效果很好，但这是我遇到问题的地方。

我有一组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");
   });
});

当我从按钮中动态删除类estimate-button然后添加类request-button然后我单击看起来像这样的新按钮时，

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

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

Answer 1

使用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 2

您需要使用委托事件使其适用于现在和将来与选择器匹配的元素。

将您的代码更改为：

$(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 3

由于您动态更改dom类名称，因此与event delegation有关。尝试使用.on()函数作为以下代码。

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

在动态更改按钮的类名后，onClick函数无法正常工作

3 个答案: