2自啓動JavaScript函數運行

Question

我有一個容器，其中包含主圖像和2-3個縮略圖。我希望用戶能夠通過點擊其父圖的縮略圖來改變圖像。除此之外，我希望容器可以拖放/排序，以便用戶能夠輕鬆地進行比較。

這就是爲什麼我在我的JavaScript文件中創建了2個自調用函數。

這一個是將主圖像更改爲縮略圖的圖像。

$(document).ready(function(){ 
    $('.thumb-img').on('click', function(){ 
    var url = $(this).attr('src'); 
    $(this).closest('.item-container').find('.primary-img').attr('src', url); 
    }); 
}); 

雖然這是用來拖放容器到交換位置。

(function() { 
    "use strict"; 
    var dragAndDropModule = function(draggableElements){ 

    var elemYoureDragging = null 
     , dataString  = 'text/html'  
     , elementDragged = null 
     , draggableElementArray = Array.prototype.slice.call(draggableElements) //Turn NodeList into array 
     , dragonDrop = {}; //Put all our methods in a lovely object 

     // Change the dataString type since IE doesn't support setData and getData correctly. 
     dragonDrop.changeDataStringForIe = (function() { 
      var userAgent = window.navigator.userAgent, 
       msie = userAgent.indexOf('MSIE '),  //Detect IE 
       trident = userAgent.indexOf('Trident/'); //Detect IE 11 

      if (msie > 0 || trident > 0) { 
       dataString = 'Text'; 
       return true; 
      } else { 
       return false; 
      } 
     })(); 


     dragonDrop.bindDragAndDropAbilities = function(elem) { 
      elem.setAttribute('draggable', 'true'); 
      elem.addEventListener('dragstart', dragonDrop.handleDragStartMove, false); 
      elem.addEventListener('dragenter', dragonDrop.handleDragEnter, false); 
      elem.addEventListener('dragover', dragonDrop.handleDragOver, false); 
      elem.addEventListener('dragleave', dragonDrop.handleDragLeave, false); 
      elem.addEventListener('drop',  dragonDrop.handleDrop, false); 
      elem.addEventListener('dragend', dragonDrop.handleDragEnd, false); 
     }; 

     dragonDrop.handleDragStartMove = function(e) { 
      var dragImg = document.createElement("img"); 
      dragImg.src = "http://alexhays.com/i/long%20umbrella%20goerge%20bush.jpeg"; 

      elementDragged = this; 

      e.dataTransfer.effectAllowed = 'move'; 
      e.dataTransfer.setData(dataString, this.innerHTML); 
      //e.dataTransfer.setDragImage(dragImg, 20, 50); //idk about a drag image 
     }; 

     dragonDrop.handleDragEnter = function(e) { 
      if(elementDragged !== this) { 
      this.style.border = "2px dashed #3a3a3a"; 
      } 
     }; 

     dragonDrop.handleDragOver = function(e) { 
      e.preventDefault(); 
      e.dataTransfer.dropEffect = 'move';  
     }; 

     dragonDrop.handleDragLeave = function(e) { 
      this.style.border = "2px solid transparent"; 
     }; 

     dragonDrop.handleDrop = function(e) { 
     if(elementDragged !== this) { 
      var data = e.dataTransfer.getData(dataString); 
      elementDragged.innerHTML = this.innerHTML; 
      this.innerHTML = e.dataTransfer.getData(dataString); 
      } 
      this.style.border = "2px solid transparent"; 
      e.stopPropagation(); 
      return false; 
     }; 

     dragonDrop.handleDragEnd = function(e) { 
      this.style.border = "2px solid transparent"; 
     }; 

     // Actiavte Drag and Dropping on whatever element 
     draggableElementArray.forEach(dragonDrop.bindDragAndDropAbilities); 
    }; 

    var allDraggableElements = document.querySelectorAll('.draggable-droppable'); 
    dragAndDropModule(allDraggableElements); 

})(); 

這兩個函數可以工作，但是當我拖動容器並改變它的位置時，第一個函數不再工作。

Answer 1

這可能是因爲你拖動它並重新創建元素節點。

您可以使用Event來解決問題。

$(document).ready(function(){ 
    // It delegate thumb-img event to body, so whatever you recreate thumb-img,is all right 
    $('body').on('click', '.thumb-img', function(){ 
    var url = $(this).attr('src'); 
    $(this).closest('.item-container').find('.primary-img').attr('src', url); 
    }); 
});