document.ready 未由 pjax 触发

Question

我正在为我正在开发的应用程序尝试 pjax，但我有点碰壁了。

也许我以错误的方式处理这个问题，让我解释一下。

在应用程序中，我的顶部有一个主菜单，其中包含不同的部分。此菜单中的每个链接都启用了 pjax，这意味着只有应用程序的主体会发生更改。

通常，当您单击没有 pjax 的链接时，将触发 document.ready 方法。我用它来将事件绑定到按钮，如下例所示。

这是我的 users.js.coffee 文件

loaded = false;
$ ->
  $("#btn_new_user").bind "click", (event) ->
    if not loaded
      @path = $('#btn_new_user').attr("path")
      $("#new-users-container").load(@path)
      loaded = true
    $("#new-users-container").slideToggle()

正如您在本例中看到的，当“users”页面完成加载时，它将绑定一个带有事件的按钮，该事件会将表单加载到 div 中并为其设置动画以显示它。

但是，当我从管理的不同部分开始并单击“用户”链接以显示此按钮时，该事件未绑定。当我重新加载“用户”部分中的页面时， document.ready 会触发并且按钮工作正常。

是否有更好的技术将事件绑定到按钮，或者是否有某种方法在 pjax 上触发 document.ready？

谢谢。

Answer 1

这就是我目前正在做的事情。

1. 使用此处指示的委托绑定来处理事件。

2. 对于其他初始化，以这种方式实现（在原始 Javascript 中）

   window.pjax_load = function() {
     $('#foo').do_whatever();
     ...
   }
   
   $(文档).ready(函数() {
     // 设置事件等
   
     window.pjax_load();
     $('a').pjax( "#container" );
     $('#container').on('pjax:end', function() { window.pjax_load(); });
   });
   

Answer 2

好吧，昨天学到了一些东西。

首先，像这样声明 CoffeeScript 将使代码仅可用于该文件，而无法在其他任何地方访问。

解决这个问题的常见方法是，例如

Users =
   aMethod: -> 
      // some code


window.Users = Users

，在其他地方你

window.aMethod

无论如何都可以这样做，这只是问题的一部分，真正的解决方案是使用委托 http://api.jquery.com/delegate/ 方法，该方法允许您在元素不存在的情况下绑定元素。

Answer 3

这将完美地工作：
您所需要做的就是在完成 pjax 请求后包含您的脚本。

Include Pjaxstandalone.js here then 

<script type='text/javascript'>
    pjax.connect({
        'container': 'content',
        'beforeSend': function(){console.log("before send");},
        'complete': function(){
            console.log("done!");
           // Your custom script here
         }
    });
</script>

希望有帮助..！！