将动态创建的列表项 ID 绑定到 jQuery 插件

Question

I am trying to create a drag and drop feature that I already implemented using a jQuery plugin. Here is what I used:

 $( "#sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" }).disableSelection();

 #sortable1, #sortable2 { border: 1px solid #eee; width: 142px; min-height: 20px; list-style-type: none; margin: 0; padding: 5px 0 0 0; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <ul id="sortable1" class="connectedSortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> <ul id="sortable2" class="connectedSortable"> <li class="ui-state-highlight">Item 1</li> <li class="ui-state-highlight">Item 2</li> <li class="ui-state-highlight">Item 3</li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li> </ul>

This works perfect and the plugin uses few built-in events to manipulate those list items. Now the problem is, I am stuck with those events when I try to bind the list items from Ajax call. Something like this:

var html = "";
html += '<ul id="sortable1" class="connectedSortable">';
$.each(value.DataFromDb, function (key, val) {
   html += '<li class="ui-state-default">' + val + '</li>';
})
html += '</ul>';

$( "#sortable1, #sortable2" ).sortable({
   connectWith: ".connectedSortable"
}).disableSelection();

So the drag and drop feature actually doesn't work when created the list items dynamically from database or Ajax call. Any way that I can make it with Ajax call?

Answer 1

It means you have binded the drag and drop event prior to element actually gets created in the DOM. In that case you can follow two approaches, you can follow any of those.

1. After creating li elements through ajax call, add teh drag and drop event handler to it.
2. (Event bubbling) add the event handler to the parent element of the li s then using event.target find whether teh event created by li or not start drag and drop.