HTML5拖放式Ajax

Question

I m trying to handle dragstart event on Ajax Dom Elements Loaded but doesn't work. Here is how I handle the Dragstart Event to get the ID of the Element being Moved:

  $(document).on(".dragItem", "dragstart", function (ev) {

        ev.originalEvent.dataTransfer.setData("text", ev.target.id);
    });

For any element loaded on the Page the Dragstart is handled by the code above.

However, when I create an Html div using JS later in the Code, the Event doesn't respond.

<div class="dragItem" draggable='true'>My Drag Item </div>

In fact I'm receiving JSON Data through jquery Ajax, then update The DOM with the HTML Created.

Answer 1

I was able to fix my issue. Once DOM is updated with JSON Data formatted to HTML, I create a jquery Object pointing to newly inserted elements, then I reapply the dragstart event handling.

$("#cellphonestock").html(total);
var d = $("#cellphonestock .dragItem");

            d.on( "dragstart", function (ev) {
                ev.originalEvent.dataTransfer.setData("text", ev.target.id);
            });