Q:

How to stop jQuery delegated event from effecting more than one element?

So I'm sure this isn't the best way to do this, but I'm pretty terrible at this sort of thing still... So what I'm trying to do, is have a delegated event bound to IMG's as they are dynamically added to a container. When an image is clicked, a box pops up, you can type a new link, and then the src of the image is changed. This all works fine, except when I change the link on subsequent images, the script that is executed on the IMG is fired on the current image, as well as the subsequent images that were clicked. (So if I change image #1, and then change image #2, image #1 and #2 are both changed on the second attempt).
I sort-of understand what this is happening because of the delegated event being propogated to all the matched elements, but I've been Googling for hours about event propogation and I cannot get anything to work.
Here is the function that changes the link of the clicked image when called:
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');
     });
}

And here is the function that assigns the delegated click, and fades in the link form:
 $('#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);
  });
});

Edit- here is the element where the url is entered:
<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>

A:

Ok after an exhausting amount of time, I finally figured out a solution that works. On the delegated event handler, I added a line that simply adds a data flag on the clicked element:
$(target).attr('changeme', 'true');
Then, on my button handler function, if the user clicks cancel, it changes the flag to false:
function handleModalButtons(target) {
    $('.cancel').on('click', function(event) {
        $(this).closest('.new-link-container').removeClass('new-link-container-visible');
        $(target).attr('changeme', 'false');
        return;
    });
}

Last, on the changeImage function I simply worked the flag into the if statement so that it checks if the image was the last one clicked or not. Then after the image is changed, it flips the flag to false to prevent any further propagation.
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;
    }
}

