【问题标题】:document.ready not triggered with pjaxdocument.ready 没有被 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 插件,可以简化和加速页面的加载。
  • 这个问题的解决方案可能有用:stackoverflow.com/q/9696119/404623

标签: jquery ruby-on-rails-3 coffeescript pjax


【解决方案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】:

    这是我目前的做法。

    1. 对事件使用此处所示的委托绑定。
    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/ 方法,它允许您在没有元素的情况下绑定元素。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-11-22
      • 2012-06-03
      • 2019-11-07
      • 2018-09-01
      • 2018-12-03
      • 2021-04-23
      相关资源
      最近更新 更多