第二次单击时不会触发按钮单击

Question

我班上有很多按钮search_camera_btn.

单击按钮然后提交表单.这一步有效.另一方面,它还应该触发按钮单击事件.

我在一个发送Ajax请求的coffeescript文件中编写了事件监听器,但它只适用于第一次点击.

我把代码放在这个要点中.

第一次单击按钮时 Javascript 工作,但后续点击失败.

实际上我在点击事件处理程序的开头放了一条警告消息,但它只在第一次发出警报.并且我的Firbug控制台中没有错误消息.(我认为它只是没有触发click事件处理程序.)

$(".search_camera_btn").click ->
    alert "test"

有很多按钮,无论我点击哪个按钮.它总是在第一次点击时工作.这是我更详细的源代码.下载

有任何想法吗？

---

我缩小了有缺陷的代码.这是第一次只调用的"准备进入开始"消息.但Firebug Javascript控制台和Rails控制台上没有显示错误.我应该在开发模式中启用某些设置吗？

IW2 = get_camera_list: ->
    console.log("Start")

    ajax_req = $.ajax
      url: "update_camera_list/"
      type: "GET"
      success: (resp) -> 
        # console.log resp

    res = setTimeout (->
      ajax_req
      ), 500
    console.log("End")
    return
jQuery ->
  $(".search_camera_btn").click ->
    console.log("Ready to enter start")    
    IW2.get_camera_list()

编译的CoffeeScript:

var IW2;

IW2 = {
  get_camera_list: function() {
    var ajax_req, res;
    console.log("Start");
    ajax_req = $.ajax({
      url: "update_camera_list/",
      type: "GET",
      success: function(resp) {}
    });
    res = setTimeout((function() {
      return ajax_req;
    }), 500);
    console.log("End");
  }
};

jQuery(function() {
  return $(".search_camera_btn").click(function() {
    console.log("Ready to enter start");
    return IW2.get_camera_list();
  });
});

Answer 1

处理程序仅被触发一次的原因是因为
".click"处理程序仅适用于当前附加
到DOM的元素.如果在进行AJAX调用后替换HTML,则事件处理程序将丢失.
您应该使用事件委托.试试这个:

jQuery(function() {
    return $("body").on("click", ".search_camera_btn", function() {
        alert("Ready to enter start");
        return IW2.get_camera_list();
     });
});

这个陈述基本上说,如果现在或将来DOM中有任何元素具有"search_camera_btn"类,并且包含在"body"元素中,则触发单击处理程序.

我希望这有帮助!

Answer 2

改变这个:

    jQuery ->
      $(".search_camera_btn").click ->
        console.log("Ready to enter start")    
        IW2.get_camera_list()

对于:

jQuery ->
  $(".search_camera_btn").click ->
    console.log("Ready to enter start")    
    IW2.get_camera_list()
    return

让我知道它是否有帮助;)