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()

正如您在此示例中所看到的，当“用户”页面完成加载时，它将绑定一个带有事件的按钮，该事件将表单加载到div中并对其进行动画处理以显示它。

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

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

感谢。

Answer 1

以下是我目前的做法。

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

对于其他初始化，以这种方式实现（在原始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(); });
});

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>

希望它有所帮助.. !!

document.ready没有用pjax触发

3 个答案: