1

我在课堂上有很多按钮search_camera_btn。

单击按钮时，它会提交一个表单。此步骤有效。另一方面，它也应该触发一个按钮点击事件。

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

我把代码放在了这个gist中。

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

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

$(".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();
  });
});
4

3 回答 3

13

处理程序只被触发一次的原因
是“.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”元素中，则触发点击处理程序。

我希望这有帮助！

于 2013-11-13T18:11:18.887 回答
5

改变这个：

    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

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

于 2013-11-12T17:27:28.003 回答
0

我会确保你的应用程序的 javascript 中没有其他任何东西失败（就像一个简单的语法错误会导致这种事情）。您是否也曾在不同的浏览器中尝试过此操作？我有一个类似的问题，我的 Ajax 在 Chrome 中可以正常工作，但由于一些附加组件/扩展而只能在 Firefox 中发布一次（然后我禁用了它们并且它们工作）。

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

如果没有其他方法，还可以在这里查看页面中间的 ajax 的 .done 完成调用：http: //api.jquery.com/jQuery.ajax/。然后在 .done 之后将图片列表显示为一个函数，这样你就知道你的 ajax 帖子总是在完成，然后再继续下一步。（当调用未完成或某处存在循环时，像这样的 Ajax 问题往往是服务器端的）

于 2013-11-18T01:57:41.680 回答