JQuery/Ajax/Class：removeClass() 然后 addClass() 在 ajax 函数中没有按预期工作

Question

我有两个 ajax 函数使用同一个按钮。我的意图是在我的 save_button class 中，默认情况下 add_group 在那里，但我想做的是当我的编辑按钮被点击时， add_group 将被删除并被替换通过 update_group 以便使用不同的 ajax 函数

保存按钮：

<button type="submit" class="save_button add_group">Save</button>

编辑按钮：

<button type="button" class="edit_group">Edit</button>

Ajax:

$(document).on('click', '.add_group', function(e) { 
  e.preventDefault(); 
 (additional content) });

$(document).on('click', '.update_group', function(e) { 
  e.preventDefault(); 
  (additional content )});

我尝试了什么：

$(document).on('click', '.edit_group', function(e) {
  e.preventDefault(); 
  $(".save_button").removeClass("add_group").addClass("update_group"); });

这个功能好像不起作用，如果我使用这个功能，保存按钮不会触发添加或更新。寻求有关如何解决此问题的任何建议。

（目标：点击 edit_button 时触发 removeClass 和 addClass）

Answer 1

$(document).on('click', //....

捕获事件确实是一个糟糕的选择。这需要事件通过每个父元素冒泡到文档。它很慢，如果您有任何捕获元素的父元素（因为它们也可能取消事件的冒泡），可能会让您非常头疼。我将在下面展示一个更好的解决方案。

根据 JQuery Documentation .on()

The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document where they occur all the way up to the body and the document element. In Internet Explorer 8 and lower, a few events such as change and submit do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.

通过 class/bindings 更改按钮的功能也是一个糟糕的选择，因为当对象不是正在发生的事情的容器时，跟踪对象本身的状态要困难得多。

我强烈推荐阅读 Philip Walton's (Engineer @ Google) - Decoupling Your HTML, CSS, and JavaScript。

$(".js-edit-button").on('click', function(e) {
  $(this).closest('.form')
    .removeClass('is-add')
    .addClass('is-update');
});
 
$(".js-save-button").on('click', function(e) {
  var $lastAcion = $(this).closest('.form')
    .find('.form-save-last-action-type');

  if ($(this).closest('.form').is('.is-add')) {
    $lastAcion.text('Add');
  }

  if ($(this).closest('.form').is('.is-update')) {
    $lastAcion.text('Update');
  }
});

.form.is-add .is-update {
  display: none;
}

.form.is-update .is-add {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form is-add">
  <div class="is-add">Form is in Add Mode</div>
  <div class="is-update">Form is in Update Mode</div>
  
  <button type="button" class="js-save-button">Save</button>
  <button type="button" class="js-edit-button">Edit</button>
  <div class="form-save-last-action-type">None</div>
</div>

JQuery/Ajax/Class：removeClass() 然后 addClass() 在 ajax 函数中没有按预期工作

JQuery/Ajax/Class: removeClass() then addClass() is not working as intended inside ajax function

ajax

jquery

class

function

button