Javascript 如何使用.replaceWith（）将函数附加到可拖动项

我想为用户制作一份兴趣列表。但此时此刻，我有点被卡住了。我想要以下； 两行兴趣，一行是用户的兴趣，第二行是用户可能感兴趣的兴趣

现在我希望用户能够点击有兴趣删除他们，我使用这个功能（工程伟大）

//删除兴趣
$（“.interest item delete”）。单击（函数（）{
$（此）.最近（'.interests item'）。替换为（'Sleep
hier iets
wat je leuk
vindt'）；
});

然后，我希望用户能够将兴趣添加到当前兴趣列表中的空白处（类为“interests item empty”的div）。我正在使用它，它也非常有效

// delete interest
$(".interest-item-delete").click(function() {
    $(this).closest('.interests-item').replaceWith('<div class="interests-item-empty">Sleep<br>hier iets<br>wat je leuk<br>vindt</div>');
});

// add interest
$('.interests-search-image').draggable({
    revert: 'invalid',
});
$('.interests-item-empty').droppable({
    accept: '.interests-search-image',
    drop: function(ev, ui){
        var title = $(ui.draggable).attr("data-title");
        var imgSrc = $(ui.draggable).attr("data-imgSrc");
        var categorie = $(ui.draggable).attr("data-cat");

        $(ui.draggable).remove();
        $(this).replaceWith('<div class="interests-item"><div class="interest-item-category">'+categorie+'</div><div class="interest-item-image"><img src="'+imgSrc+'"><div class="interest-item-delete">X</div></div><div class="interest-item-title">'+title+'</div></div>');
    },
});

//添加兴趣
$（'.interests search image'）。可拖动({
还原：“无效”，
});
$（'.interests item empty'）。可拖放({
接受：“.兴趣搜索图像”，
下拉：功能（ev、ui）{
var title=$（ui.draggable）.attr（“数据标题”）；
var imgSrc=$（ui.draggable）.attr（“数据imgSrc”）；
变量分类=$（ui.draggable）.attr（“数据类别”）；
$（ui.draggable）.remove（）；
$（this）.替换为（“”+category+'X'+title+“”）；
},
});

但现在我有两个问题； 1.当我删除一个项目时，我不能在上面放任何东西（虽然它确实有正确的类）。 2.当我将项目拖到用户的兴趣列表时，我无法删除它们

我猜这两个问题都有一种我不熟悉的解决方案。希望你能帮助我

应要求：我已经尝试过的

// delete interest
$(".interest-item-delete").click(function() {
    $(this).closest('.interests-item').replaceWith('<div class="interests-item-empty">Sleep<br>hier iets<br>wat je leuk<br>vindt</div>');
    $('.interests-item-empty').droppable({
        accept: '.interests-search-image',
        drop: function(ev, ui){
            var title = $(ui.draggable).attr("data-title");
            var imgSrc = $(ui.draggable).attr("data-imgSrc");
            var categorie = $(ui.draggable).attr("data-cat");
        $(ui.draggable).remove();
        $(this).replaceWith('<div class="interests-item"><div class="interest-item-category">'+categorie+'</div><div class="interest-item-image"><img src="'+imgSrc+'"><div class="interest-item-delete">X</div></div><div class="interest-item-title">'+title+'</div></div>');
        $(".interest-item-delete").click(function() {
            $(this).closest('.interests-item').replaceWith('<div class="interests-item-empty">Sleep<br>hier iets<br>wat je leuk<br>vindt</div>');
            $('.interests-item-empty').droppable({
                accept: '.interests-search-image',
                drop: function(ev, ui){
                    var title = $(ui.draggable).attr("data-title");
                    var imgSrc = $(ui.draggable).attr("data-imgSrc");
                    var categorie = $(ui.draggable).attr("data-cat");

                    $(ui.draggable).remove();
                    $(this).replaceWith('<div class="interests-item"><div class="interest-item-category">'+categorie+'</div><div class="interest-item-image"><img src="'+imgSrc+'"><div class="interest-item-delete">X</div></div><div class="interest-item-title">'+title+'</div></div>');

                },
            });
        });
    },
});
});

//删除兴趣
$（“.interest item delete”）。单击（函数（）{
$（此）.最近（'.interests item'）。替换为（'Sleep
hier iets
wat je leuk
vindt'）；
$（'.interests item empty'）。可拖放({
接受：“.兴趣搜索图像”，
下拉：功能（ev、ui）{
var title=$（ui.draggable）.attr（“数据标题”）；
var imgSrc=$（ui.draggable）.attr（“数据imgSrc”）；
变量分类=$（ui.draggable）.attr（“数据类别”）；
$（ui.draggable）.remove（）；
$（this）.替换为（“”+category+'X'+title+“”）；
$（“.interest item delete”）。单击（函数（）{
$（此）.最近（'.interests item'）。替换为（'Sleep
hier iets
wat je leuk
vindt'）；
$（'.interests item empty'）。可拖放({
接受：“.兴趣搜索图像”，
下拉：功能（ev、ui）{
var title=$（ui.draggable）.attr（“数据标题”）；
var imgSrc=$（ui.draggable）.attr（“数据imgSrc”）；
变量分类=$（ui.draggable）.attr（“数据类别”）；
$（ui.draggable）.remove（）；
$（this）.替换为（“”+category+'X'+title+“”）；
},
});
});
},
});
});

---

如上所述，这将使拖动的项可删除。但当我删除它并在其上放置一个新项目时，该项目是不可删除的。所以这就是为什么我想我需要一个循环或什么的。

看看它是否适合你。基本上，仅在特定元素上初始化Dropable，而不是在匹配元素集上初始化Dropable：

{由于我很难读懂您的代码，所以可能缺少一些内容}

编辑

添加了

.off（'click'）

，因为您似乎要将click事件重新绑定到已绑定的元素

$(document).on('click',".interest-item-delete",function () {
    var $itemEmpty = $('<div class="interests-item-empty">Sleep<br>hier iets<br>wat je leuk<br>vindt</div>');
    $(this).closest('.interests-item').replaceWith($itemEmpty);
    $itemEmpty.droppable({
        accept: '.interests-search-image',
        drop: function (ev, ui) {
            var title = $(ui.draggable).attr("data-title");
            var imgSrc = $(ui.draggable).attr("data-imgSrc");
            var categorie = $(ui.draggable).attr("data-cat");
            $(ui.draggable).remove();
            $(this).replaceWith('<div class="interests-item"><div class="interest-item-category">' + categorie + '</div><div class="interest-item-image"><img src="' + imgSrc + '"><div class="interest-item-delete">X</div></div><div class="interest-item-title">' + title + '</div></div>');
            $(".interest-item-delete").off('click').click(function () {
                var $itemEmpty = $('<div class="interests-item-empty">Sleep<br>hier iets<br>wat je leuk<br>vindt</div>');
                $(this).closest('.interests-item').replaceWith($itemEmpty);
                $itemEmpty.droppable({
                    accept: '.interests-search-image',
                    drop: function (ev, ui) {
                        var title = $(ui.draggable).attr("data-title");
                        var imgSrc = $(ui.draggable).attr("data-imgSrc");
                        var categorie = $(ui.draggable).attr("data-cat");

                        $(ui.draggable).remove();
                        $(this).replaceWith('<div class="interests-item"><div class="interest-item-category">' + categorie + '</div><div class="interest-item-image"><img src="' + imgSrc + '"><div class="interest-item-delete">X</div></div><div class="interest-item-title">' + title + '</div></div>');

                    },
                });
            });
        },
    });
});

$（文档）.on（'click'，.interest item delete'，函数（）{
变量$itemEmpty=$（'Sleep
hier iets
wat je leuk
vindt'）；
$（this）.最近（'.interests item'）。替换为（$itemEmpty）；
$itemEmpty.dropable({
接受：“.兴趣搜索图像”，
下拉：功能（ev、ui）{
var title=$（ui.draggable）.attr（“数据标题”）；
var imgSrc=$（ui.draggable）.attr（“数据imgSrc”）；
变量分类=$（ui.draggable）.attr（“数据类别”）；
$（ui.draggable）.remove（）；
$（this）.替换为（“”+categorie+'X'+title+“”）；
$（“.interest item delete”）.off（'click'）。click（函数（）{
变量$itemEmpty=$（'Sleep
hier iets
wat je leuk
vindt'）；
$（this）.最近（'.interests item'）。替换为（$itemEmpty）；
$itemEmpty.dropable({
接受：“.兴趣搜索图像”，
下拉：功能（ev、ui）{
var title=$（ui.draggable）.attr（“数据标题”）；
var imgSrc=$（ui.draggable）.attr（“数据imgSrc”）；
变量分类=$（ui.draggable）.attr（“数据类别”）；
$（ui.draggable）.remove（）；
$（this）.替换为（“”+categorie+'X'+title+“”）；
},
});
});
},
});
});

这不是完美的解决方案。我建议你，每一个项目需要更多的OO想法。请考虑我的丑陋代码。< /P>

$(function () {

    var droppableOptions = {
        accept: '.interests-search-image',
        drop: function (ev, ui) {
            var title = $(ui.draggable).attr("data-title");
            var imgSrc = $(ui.draggable).attr("data-imgSrc");
            var categorie = $(ui.draggable).attr("data-cat");

            $(ui.draggable).remove();
            var $item = $(this).removeClass("interests-item-empty")
                .addClass("interests-item");
            $item.html('<div class="interest-item-category">' + categorie + '</div><div class="interest-item-image"><img src="' + imgSrc + '"><div class="interest-item-delete">X</div></div><div class="interest-item-title">' + title + '</div>');
        }
    };
    // delete interest

    $(document).on("click.item-delete", ".interest-item-delete", function () {
            var $item = $(this).closest(".interests-item");
            $item.removeClass("interests-item")
                .addClass("interests-item-empty")
                .html("Sleep<br>hier iets<br>wat je leuk<br>vindt");
            $item.droppable(droppableOptions);
        });

    $('.interests-search-image').draggable({
            revert: 'invalid'
        });
    $('.interests-item-empty').droppable(droppableOptions);

});

$（函数（）{
var droppableOptions={
接受：“.兴趣搜索图像”，
下拉：功能（ev、ui）{
var title=$（ui.draggable）.attr（“数据标题”）；
var imgSrc=$（ui.draggable）.attr（“数据imgSrc”）；
变量分类=$（ui.draggable）.attr（“数据类别”）；
$（ui.draggable）.remove（）；
var$item=$（this.removeClass（“兴趣项为空”）
.addClass（“权益项目”）；
$item.html（“”+categorie+'X'+title+“”）；
}
};
//删除利息
$（文档）。在（“单击.item delete”，“.interest item delete”，函数（）{
var$item=$（this.nexist（“.interests item”）；
$item.removeClass（“兴趣项”）
.addClass（“利息项目为空”）
.html（“睡眠
hier iets
wat je leuk
vindt”）；
$item.droppable（droppableOptions）；
});
$（'.interests search image'）。可拖动({
回复：“无效”
});
元（‘）利息