Question

这是jqueryui网站上一个可拖动的可排序示例，我需要使用live（）（我认为）因为元素是通过ajax创建的，有人知道如何将live事件应用于以下内容吗？

<script>
    $(function() {
        $( "#sortable" ).sortable({
            revert: true
        });
        $( "#draggable" ).draggable({
            connectToSortable: "#sortable",
            helper: "clone",
            revert: "invalid"
        });
        $( "ul, li" ).disableSelection();
    });
    </script>

Answer 1

你没有使用live这个（我认为你不能），只需在你添加它们之后将它们连接起来，{{ 1}}处理程序。例如，如果使用success：

load

Live Example

它使用jQuery UI演示页面中的这个经过修改的HTML（仅用$("#target").load("your url", function() { // Replace the selectors below to match what you load $( "#target *[data-name=sortable]" ).sortable({ revert: true }); $( "#target *[data-name=draggable]" ).draggable({ connectToSortable: "#target *[data-name=sortable]", helper: "clone", revert: "invalid" }); $(this).find( "ul, li" ).disableSelection(); });代替id值，因此它们不必是唯一的）：

data-name

Answer 2

我认为不可能按照您的意愿进行直播活动。您拥有的最佳选择是在向列表添加新元素时使用回调函数，并在每次有新元素时重新启用新对象以使其可拖动。

这样的事情：

// Call to add a new element
$.ajax({
  url: 'addElem',
  success: function(data) {
    $( "#newDraggableObject" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
  }
});

Answer 3

我有完全相同的问题，我认为使用JQuery addin方法解决这个问题是一个更好的主意：

//Add draggable feature:
//Define a setup method for the draggable config so we can reuse it for dynamic elements
$(function() {
    jQuery.fn.draggableSetup = function draggableSetup() {
        this.draggable(
        {
            // enter your custom draggable code here...
        });
        return this;
    }
});

//Apply the draggable config your dynamic elements after adding them
$("#dynamic_element_id").draggableSetup();

感谢this post的答案。

这为您提供了可重用的解决方案，您无需为每个ajax重复实施方法

jquery UI可以直播

3 个答案: