我有两个使用相同按钮的ajax函数。我的意图就在我的心里 save_button 类， 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"); });此功能似乎不起作用，如果我使用此功能，“保存”按钮不会触发“添加”或“更新”。询问有关如何解决此问题的任何建议。
（目标：触发 removeClass 及 addClass 单击“编辑”按钮时）
1条答案
按热度按时间kx5bkwkv1#
对于捕捉事件来说，这确实是一个糟糕的选择。这要求事件在文档的每个父元素中冒泡。如果您有任何捕获元素的父元素（因为它们也可能会取消事件的冒泡），那么它的速度很慢，并且会给您带来巨大的麻烦。我将在下面演示一个更好的解决方案。
根据jquery文档
.on()大多数浏览器事件从文档中最深、最内层的元素（事件目标）冒泡或传播，它们发生在文档中，一直传播到主体和文档元素。在InternetExplorer8和更低版本中，一些事件（如change和submit）不会本机冒泡，但jquery会将这些事件修补为冒泡并创建一致的跨浏览器行为。通过类/绑定更改按钮的功能也是一个糟糕的选择，因为当对象本身不是正在发生的事情的容器时，跟踪对象本身的状态要困难得多。
我强烈推荐阅读philip walton的（engineer@google）——分离html、css和javascript。