开发者问题收集

使用 Jquery addClass 添加到元素的类名在使用 javascript onclick 调用时无法被检测到

2019-09-09
614
javascript jquery html

我有一个输入元素 

<input type="submit" id="btn-submit-id" 
  class="btn btn-success btn-submit-employee employee-tag" value="Submit">

并使用指向其类名 btn-submit-employee 的 javascript onclick 调用 - 

$(".btn-submit-employee").on("click", function(e){ e.preventDefault(); alert('submit'); });

单击提交按钮时，我将其值更改为 value="Update" ，同时调用 addClass 和 removeClass 函数，添加 btn-update-employee 作为其类名之一，并删除 btn-submit-employee 类名。当我第二次单击按钮时，它应该调用函数 

$(".btn-update-employee").on("click", function(e){ e.preventDefault(); alert('Update'); });

但是，即使我使用 removeClass 函数删除了类名 btn-submit-employee ，它仍然会调用指向类名 btn-submit-employee 的 javascript 函数。这有什么问题？下面是我的完整代码。非常感谢。

Html 元素： 

<input type="submit" id="btn-submit-id" 
  class="btn btn-success btn-submit-employee employee-tag" value="Submit">

Javascript： 

$(".btn-submit-employee").on("click", function(e){ 
  e.preventDefault(); 

  $("#btn-submit-id").val("Update");
  $(".btn-submit-employee").addClass("btn-update-employee");
  $(".btn-submit-employee").removeClass("btn-submit-employee");
  alert('submit'); 
 });

$(".btn-update-employee").on("click", function(e){ 
  e.preventDefault(); 
  alert('Update'); 
});
3个回答

这样添加的事件处理程序仅在页面首次加载时附加。要按预期工作，您需要将事件处理程序委托给 DOM 中的更高元素 - 通常是 document 本身，但您也可以使用周围元素（如“div”） 

$(document).on("click",".btn-submit-employee", function(e){ 
  e.preventDefault(); 

  $("#btn-submit-id").val("Update");
  $(".btn-submit-employee").addClass("btn-update-employee");
  $(".btn-submit-employee").removeClass("btn-submit-employee");
  alert('submit'); 
 });

$(document).on("click", ".btn-update-employee",function(e){ 
  e.preventDefault(); 
  alert('Update'); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="submit" id="btn-submit-id" class="btn btn-success btn-submit-employee employee-tag" value="Submit">
Jamiec
2019-09-09

这是因为您在类名为 btn-update-employee 的元素出现之前创建了 on 处理程序，因此没有元素对该事件处理程序做出反应。此外，类名为 btn-submit-employee 的原始元素仍将是原始事件的目标。

因此，您需要通过冒泡委托事件。jQuery 处理这个问题非常智能。只需在文档上监听事件，并在事件名称后将选择器添加为函数参数即可。 

"use strict";
console.clear();

$(document).on("click", ".btn-submit-employee", function(e) {
  e.preventDefault();

  $("#btn-submit-id").val("Update");
  $(".btn-submit-employee").addClass("btn-update-employee");
  $(".btn-submit-employee").removeClass("btn-submit-employee");
  alert('submit');
});

$(document).on("click", ".btn-update-employee", function(e) {
  e.preventDefault();
  alert('Update');
});
.btn-submit-employee {
  background: blue;
  color: white;
  padding: 3px 8px;
}

.btn-update-employee {
  background: green;
  color: white;
  padding: 3px 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="submit" id="btn-submit-id" class="btn btn-success btn-submit-employee employee-tag" value="Submit">

您可能需要阅读 jQuery 的 on

Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated event handlers to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

的文档
yunzen
2019-09-09

发生这种情况是因为事件处理程序已添加到元素中。您使用的类只是为了查找目标元素。最好的办法是使用相同的处理程序，但状态不同... 

$(".btn-submit-employee").on("click", function(e){ 
      e.preventDefault(); 
    
      if($(this).is(".btn-submit-employee")){
         $("#btn-submit-id").val("Update");
         $(".btn-submit-employee").addClass("btn-update-employee");
         $(".btn-submit-employee").removeClass("btn-submit-employee");
         alert('submit'); 
      }else{
         alert('Update'); 
      }
     
     });
    
    $(".btn-update-employee").on("click", function(e){ 
      e.preventDefault(); 
      
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="btn-submit-employee" id="btn-submit-id" value="Submit"/>
Salketer
2019-09-09