php - 为什么PJAX停止Nestable工作？

我的应用程序中有3列。每列都有一个无序列表。我正在使用Nestable在列表之间拖放列表项。标记如下：

<div class="row-fluid span12">
  <div class="cf nestable-lists">
   <div id="pjax-content">
    <div class="span4">
        <div class="dd" id="nestable1">
            <ul class="dd-list">
                <li class="dd-item dd3-item" data-id="123">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">
                        // list content
                    </div>
                </li>
                <li class="dd-item dd3-item" data-id="456">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">
                        // list content
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="span4">
        <div class="dd" id="nestable2">
            <ul class="dd-list">
                <li class="dd-item dd3-item" data-id="789">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">
                        // list content
                    </div>
                </li>
                <li class="dd-item dd3-item" data-id="1011">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">
                        // list content
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="span4">
        <div class="dd" id="nestable3">
            <ul class="dd-list">
                <li class="dd-item dd3-item" data-id="1213">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">
                        // list content
                    </div>
                </li>
                <li class="dd-item dd3-item" data-id="1415">
                    <div class="dd-handle dd3-handle">Drag</div>
                    <div class="dd3-content">
                        // list content
                    </div>
                </li>
            </ul>
        </div>

    </div>
  </div>
 </div>
</div>

这可行，我可以在每个列表之间拖放列表项。问题是当我实现PJAX时。

我有一些使用PJAX更改url的链接，即每个链接都会根据URL更新每个列表中的数据或数据顺序。数据将在id =“ pjax-content”中相应地更新，因此可以正常工作。这是服务器端代码的一个片段（使用CI）：

if (isset($_SERVER["HTTP_X_PJAX"])) {

        echo $data['contents'];

    } else {

        // construct views when not PJAX
    }

$ data ['contents']包含html作为字符串。

我也有以下JS库（我尝试删除其中一些，问题仍然存在）：

<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>

<script type="text/javascript" src="nestable.js"></script>
<script type="text/javascript" src="nestable-settings.js"></script>
<script type="text/javascript" src="bootstrap-editable.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src='jquery.pjax.js'></script>
<script type="text/javascript">

   $(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-content');
    $(document).on('pjax:send', function() {
      console.log("before send");
    });
    $(document).on('pjax:complete', function() {
      console.log("done!");
    });

</script>

问题

当我单击PJAX可用的链接之一时，数据将被更新，页面不会重新加载，并且控制台在发送和完成之前显示-一切都很好。但是，可嵌套项目不再是可选的，因此我无法将其拖放。当我执行整页刷新时，它可以工作，并且可以拖放。

我已经比较了之前和之后的标记（因为这是以前的问题），并且一切都相同。

关于我要去哪里的任何建议？或者如何最好地调试呢？

最佳答案

在ajax完成功能后调用嵌套

  $(document).on('pjax:complete', function() {
   $('#nestable1,#nestable2,#nestable3').nestable();
  });

关于php - 为什么PJAX停止Nestable工作？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14747145/