Question

我在ajax请求的success处理程序中，如：

    $.ajax({
        type: "POST",
        url: "{{ path('getevents') }}",
        data: {start: start, end : end},
        success: function (data) {

            for ( var i = 0; i < data['rdv'].length; i++ ) {
                var divRdv = '<div>My div</div>';
                $('myElement').append(divRdv);

                $(divRdv).draggable(); // THIS DOESN'T WORK
            }
        },
        error: function (xhr, status, error) {
          console.log(xhr.responseText);
      }
  });

所以，在一个循环中，我需要创建一个div divRdv，将此div附加到myElement，之后，我希望这个div可拖动。

我该怎么办？

我正在尝试逐个添加draggable到每个div，有一种方法可以一次性将draggable添加到多个元素中吗？

Answer 1

那是因为你已经通过附加它在DOM中添加了该代码。但由于它不是一个jQuery对象，它只是只是添加为HTML而你的变量只是保存文本，而不是一个标识dom元素的jquery对象。

因此，当您执行可拖动调用时，您将在一个全新的jquery（因此是dom）对象上执行此操作，而不是在已添加的对象上执行此操作。

这样做：

var divRdv = $('<div>My div</div>');
$('myElement').append(divRdv);

divRdv.draggable(); // THIS SHOULD WORK :)

Answer 2

你可以在你的可拖动div中添加一个类，然后在所有这些div上调用draggable，如下所示：

$.ajax({
        type: "POST",
        url: "{{ path('getevents') }}",
        data: {start: start, end : end},
        success: function (data) {
            for ( var i = 0; i < data['rdv'].length; i++ ) {
                var divRdv = '<div class="draggable">My div</div>';
                $('myElement').append(divRdv);
            }
            $('.draggable').draggable();
        },
        error: function (xhr, status, error) {
          console.log(xhr.responseText);
      }
  });

Answer 3

与A. Rama的答案类似，但是使用jsfiddle：http://jsfiddle.net/4bztfpyf/1/

for ( var i = 0; i < 5; i++ ) {
    var divRdv = $('<div>My div</div>');
    $('body').append(divRdv);

    divRdv.draggable(); // THIS WORKS
}

jQuery，添加draggable以追加对象

3 个答案: