如何阻止jQuery委託事件影響多個元素？

Question

所以我相信這不是最好的方式來做到這一點，但我仍然非常可怕在這種事情...所以我想要做的是有一個委託事件綁定到IMG的因爲它們被動態添加到容器中。單擊圖像時，彈出一個框，您可以鍵入一個新鏈接，然後更改圖像的src。這一切都可以正常工作，除非在後續圖像上更改鏈接時，在IMG上執行的腳本會在當前圖像上觸發，以及後續圖像被點擊。 （所以如果我改變圖像＃1，並且然後改變圖像＃2，圖像＃1和＃2在第二次嘗試時都被改變）。

我有點理解這是因爲授權事件被傳播到所有匹配的元素而發生的事情，但我一直在谷歌搜索幾個小時的事件傳播，我不能得到任何工作。

這裏是調用時改變了點擊圖片的鏈接功能：

function changeLink(image) { 
    console.log('OK button clicked'); 
    var inputField = $('input[name="newUrl"]'); 
    var p = ''; 
    var prefix = checkForPrefix(p); 
    var link = prefix + inputField.val(); 

    function checkForPrefix(p) { 
    if (inputField.val().match('http')) { 
     console.log("HTTP already exists, so no need to add it."); 
     return p; 
    } else { 
     p = 'http://'; 
     console.log("No prefix, so I am going to add " + p + " to the link."); 
     return p; 
    } 
    } 
    $(image).fadeOut(300, function(event) { 
    $(image).attr("src", link); 
    }).fadeIn(300); 
    $('.new-link-container').animate({ 
     opacity: 0, 
    }, 
    'fast', 
    function(event) { 
     console.log('Fading out link box'); 
     $(this).css('z-index', '0'); 
    }); 
} 

這裏是分配委派點擊的功能，並在鏈接的形式消失：

$('#editor').on('click', 'img', function(event) { 
    var image = this; 
    $('.new-link-container').animate({ 
     opacity: 1, 
    }, 
    'fast', 
    function() { 
     console.log("Fading in link box"); 
     $(this).css('z-index', '99'); 
    }); 
    $('input[name="newUrl"]').attr('placeholder', 'Please enter a new location for your image'); 
    $('.cancel').click(function() { 
    console.log('Cancel button clicked'); 
    $(this).closest('.new-link-container').animate({ 
      opacity: 0, 
     }, 
     'fast', 
     function(event) { 
      $(this).css('z-index', '0'); 
     }); 
    }); 
    $('.accept').click(function(event) { 
    changeLink(image); 
    }); 
}); 

編輯 - 這裏是網址輸入的元素：

<div class="new-link-container"> 
    <div class="new-link-container-start"></div> 
     <div class="new-link"> 
      <input name="newUrl" type="text" placeholder="Please enter a new location for your image"> 
      <div class="buttons"> 
       <button class="cancel">Cancel</button> 
       <button class="accept">OK</button> 
      </div> 
     </div> 
    <div class="new-link-container-end"></div> 
</div> 

Answer 1

確定後，浪費時間，我終於想出了一個可行的解決方案。在委託的事件處理程序中，我添加了一行，簡單地增加了一個數據標誌點擊的元素上：

$(target).attr('changeme', 'true');

然後，在我的按鈕處理功能，如果用戶點擊取消，它改變了標誌設置爲false ：

function handleModalButtons(target) { 
    $('.cancel').on('click', function(event) { 
     $(this).closest('.new-link-container').removeClass('new-link-container-visible'); 
     $(target).attr('changeme', 'false'); 
     return; 
    }); 
} 

最後，在changeImage功能，我只是工作的標誌進入if語句，這樣，它檢查如果圖像是最後一個按下。然後在圖像改變後，它將標誌翻轉爲假以防止任何進一步的傳播。

function changeImage(target, newImageLoc) { 
    console.log("** changeImage **"); 
    if ($(target).attr('changeme') == 'true') { 
     console.log("true"); 
     if (newImageLoc.length > 0) { 
      var prefix = checkForPrefix(newImageLoc); 
      var correctedLink = prefix + newImageLoc; 
      console.log('"New image location is" ' + newImageLoc); 
      if (target[0].localName == 'img') { 
       target.attr("src", correctedLink); 
       // console.log('changeImage: "No <a> tag"'); 
      } 
      if (target[0].localName == 'a') { 
       target.find('img').attr("src", correctedLink); 
       console.log('changeImage: "Found <a> tag"'); 
      } 
     } else { 
      console.log('changeImage: "Image location field is empty, bypassing."'); 
     } 
     $(target).attr('changeme', 'false'); 
     return true; 
    } else if ($(target).attr('changeme') == 'false') { 
     console.log("false"); 
     return false; 
    } 
}