Javascript 如何阻止jQuery委托事件影响多个元素？

所以我肯定这不是最好的方法，但我在这方面还是很糟糕。。。所以我想做的是，在IMG动态添加到容器时，将一个委托事件绑定到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);
  });
});

编辑-此处是输入url的元素：

<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>

取消
好啊

好的，经过一段令人精疲力尽的时间，我终于找到了一个可行的解决方案。在委托事件处理程序上，我添加了一行，该行仅在单击的元素上添加一个数据标志：

$（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
语句中，以便它检查图像是否是最后单击的图像。然后，在更改图像后，它将标志翻转为false以防止进一步传播

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;
    }
}

函数changeImage（目标，newImageLoc）{
console.log（“**changeImage**”）；
if（$（target.attr（'changeme'）=='true'）{
console.log（“真”）；
如果（newImageLoc.length>0）{
var prefix=checkForPrefix（newImageLoc）；
var correctedLink=前缀+newImageLoc；
console.log（“”新映像位置为“”+newImageLoc）；
如果（目标[0]。localName==“img”）{
target.attr（“src”，correctedLink）；
//log（'changeImage:'No tag'）；
}
如果（目标[0].localName=='a'）{
target.find（'img'）.attr（“src”，correctedLink）；
log（'changeImage:'foundtag'）；
}
}否则{
log（'changeImage:“图像位置字段为空，正在绕过。”）；
}
$（target.attr（'changeme'，'false'）；
返回true；
}else if（$（target.attr（'changeme'）=='false'）{
控制台日志（“假”）；
返回false；
}
}