document.ready 没有被 pjax 触发

Posted 2023-03-03

【中文标题】document.ready 没有被 pjax 触发

【英文标题】：document.ready not triggered with pjax

【发布时间】：2011-12-27 13:19:58

【问题描述】：

我正在为我正在开发的应用程序尝试 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()

正如你在这个例子中看到的，当“用户”页面完成加载时，它会绑定一个按钮和一个事件，该事件会将一个表单加载到一个 div 中并动画显示它。

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

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

谢谢。

【问题讨论】：

这是pjax还是ajax，我第一次看到pjax

这是coffeescript，它是一种编写javascript的简化方式。 pjax 只是一个 Rails 插件，可以简化和加速页面的加载。

这个问题的解决方案可能有用：***.com/q/9696119/404623

【参考方案1】：

这将完美运行：您需要做的就是在完成 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>

希望对您有所帮助..!!

【参考方案2】：

这是我目前的做法。

对事件使用此处所示的委托绑定。

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

window.pjax_load = function() 
  $('#foo').do_whatever();
  ...


$(document).ready(function() 
  // setup events etc

  window.pjax_load();
  $('a').pjax( "#container" );
  $('#container').on('pjax:end', function()  window.pjax_load(); );
);

【讨论】：

如果每个页面有不同的初始化代码怎么办？

【参考方案3】：

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

首先，像这样声明咖啡脚本将使代码仅对该文件可用，而不能在其他任何地方访问。

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

Users =
   aMethod: -> 
      // some code


window.Users = Users

然后在其他地方你可以做

window.aMethod

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