jQuery“组合按钮”点击处理的问题答案

【问题标题】：Issue with jQuery 'combo button' click handlingjQuery“组合按钮”点击处理的问题
【发布时间】：2018-01-03 15:11:34
【问题描述】：

我正在寻找一些关于我正在组合的按钮交互的帮助。

这个想法是用户将单击“RESET”按钮，然后必须取消或确认才能重置表单。

.replace() 方法按预期工作，我的“RESET”按钮变成了我想要的“CANCEL”/“CLEAR”组合按钮。/

问题是当我点击“CANCEL”（或“CLEAR”按钮，现在......）并返回正常的“RESET”按钮时，我无法再点击“RESET”按钮重复这个过程。

猜测，我的问题在于：

正在处理 .click() 事件，但我想不通。 'return false' 和 .unbind("click") 的各种组合都没有帮助。
.replace() 方法可能搞砸了我的事件绑定？

当然，非常感谢任何指导！ Codepen 演示链接位于底部。

谢谢 - JR（附注：请原谅我可能笨拙的 jQuery - 这里还是新的）

    $("#reset").click(function() {
        $(this)
          .replaceWith(
            '<div id="resetGroup" class="btn-group btn-group-justified" role="group">' +
            '<div class="btn-group" role="group">' +
            '<input id="cancel" type="button" class="btn btn-danger" value="CANCEL" />' +
            '</div>' +
            '<div class="btn-group" role="group">' +
            '<input id="clear" type="button" class="btn btn-success" value="CLEAR" />' +
            '</div></div>'
          )
          .unbind("click");

      $("#cancel").click(function() {
          // GO BACK TO THE REGULAR "RESET" BUTTON //
          $("#resetGroup").replaceWith(
            '<input class="btn btn-default btn-block" id="reset" type="button" value="RESET" />'
          );
      });

      $("#clear").click(function() {
          // DO RESET STUFF HERE BEFORE GOING BACK TO THE REGULAR "RESET" BUTTON //
          $("#resetGroup").replaceWith(
            '<input class="btn btn-default btn-block" id="reset" type="button" value="RESET" />'
          );
      });
    });

Codepen Link

【问题讨论】：

FWIW：当使用下面的“接受的答案”时，我是否在主函数中使用 .unbind("click") 没有区别。 YMMV

标签： javascript jquery twitter-bootstrap forms

【解决方案1】：

您的元素被“替换”...考虑它们是动态生成的。

您必须使用“委托”以不同方式定义处理程序。

例子：

$(document).on("click","#reset",function(){
  // The rest is the same
});

对所有被替换的元素执行此操作。

【讨论】：

谢谢你，这似乎已经很好地解决了它！