Question

我有很多关于班级search_camera_btn的按钮。

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

我在一个发送Ajax请求的coffeescript文件中编写了事件监听器，但它只在第一次点击时起作用。

我将代码放在gist。

中

Javascript 在第一次点击按钮时有效，但在后续点击时失败。

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

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

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

有什么想法吗？

我缩小了有缺陷的代码。这是第一次调用的“准备进入开始”消息。但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

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

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

这句话基本上说，如果现在或将来DOM中有任何元素，它们都有＆＃34; search_camera_btn＆＃34;，并且包含在＆＃34; body＆＃34;元素，然后触发单击处理程序。

我希望这有帮助！

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

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

Answer 3

我会确保你的应用程序的javascript中没有其他内容失败（就像一个简单的语法错误可能导致这种事情）。你也尝试过不同的浏览器？我有一个类似的问题，我的Ajax在Chrome中运行良好但只会在Firefox中发布一次因为一些附加组件/扩展（然后我禁用它们并且它们有效）。

另外，我不确定我是否正确阅读了你的要点，但看起来你在application.js的jQuery和btn.js.coffee中都指定了.click，我很确定application.js中的那一部分应该只是在观察元素的功能/结果而不是再次指定点击。

如果没有其他工作，请在此处查看ajax的.done完成电话大约一半：http://api.jquery.com/jQuery.ajax/。然后在.done之后将图片列表显示为一个函数，这样你就知道你的ajax帖子总是在完成下一件事之前完成。（当调用未完成或某处存在循环时，像这样的Ajax问题通常倾向于服务器端）

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

编译的CoffeeScript：

3 个答案: