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语句中，以便检查图像是否是最后一次单击的图像。然后在图像更改后，将标志翻转为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;
    }
}

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

1 个答案: