如何使用.replaceWith（）

Question

將函數附加到可拖動項目我想爲用戶創建一個興趣列表。但是在這個時候，我有點喋喋不休。我想要以下; 兩行興趣，一個是用戶的興趣愛好，另一個興趣愛好可能是用戶感興趣的。

現在我想要用戶能夠點擊那裏的興趣刪除它們，我使用這個功能（偉大的工程）;

// 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>'); 
    }, 
}); 

但現在我得到了2個問題; 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>'); 

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

如上所述，這將使拖動的項目可刪除。但是，當我刪除它，並刪除一個新的項目，該項目是不可刪除的。所以這就是爲什麼我認爲我需要一個循環或什麼。

Answer 1

這不是完美的解決方案。我建議你每個項目都需要更多的面向對象的想法。請考慮我的醜陋代碼。

$(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); 

}); 

您可以使用.on() method.這將有助於您的情況。

Answer 2

看看它是否適合你。基本上，初始化可放開只在特定的元素，不匹配的元素：

{東西可能會錯過，因爲我已經很難有時間去閱讀你的代碼}

編輯

添加.off('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>'); 

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