如何使用jQuery拖放生成的图像

Question

这是我的代码：

$(document).ready(function() {

    $('#add_btn').click(function() {  
    var src$ = $('#img_loc').val();
    $('<img>').attr({
        src: src$,
        class: 'canDrag'}).appendTo($('#work_area'));
    });

    $('.canDrag').hover(
        function() {
            $(this).addClass('dragMe');
        },
        function() {
            $(this).removeClass('dragMe');
        }
    );

    $('.canDrag').draggable();
    $('.dropSpace').droppable({
        accept:'.canDrag'
    });
});

jquery和jquery ui的目录路径都是正确的，但我仍然无法使用类'canDrag'.拖动图像有什么想法吗？

Answer 1

创建图像后需要调用初始化代码。目前，当您创建新图像时，它是全新的，并且没有附加您的事件。尝试这样的事情：

$('#add_btn').click(function() {  
    var src$ = $('#img_loc').val();
    $('<img>').attr({
        src: src$,
        class: 'canDrag'
    }).appendTo($('#work_area'));

    $('.canDrag').hover(
        function() {
            $(this).addClass('dragMe');
        },
        function() {
            $(this).removeClass('dragMe');
        }
    );

    $('.canDrag').draggable();
    $('.dropSpace').droppable({
        accept:'.canDrag'
    });
});