Почему 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 работает, данные обновляются, страница не перезагружается, а консоль показывает перед отправкой и готово - так что все в порядке. Однако вложенные элементы больше нельзя выбрать, поэтому я не могу их перетаскивать. Когда я делаю полное обновление страницы, это работает, и я могу перетаскивать.

Я сравнил разметку до и после (поскольку это был предыдущий выпуск), и все то же самое.

Любые предложения о том, где я ошибаюсь? Или как лучше отладить это?


person gelviis    schedule 07.02.2013    source источник


Ответы (1)


вызовите вложенность после завершения вашей функции ajax

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