Comment arrêter l'événement délégué jQuery d'effectuer plus d'un élément?

Question

Je suis sûr que ce n'est pas la meilleure façon de le faire, mais je suis assez terrible à ce genre de choses encore ... Alors, ce que je suis en train de faire, est d'avoir un événement lié à IMG délégué de car ils sont ajoutés dynamiquement à un conteneur. Lorsqu'une image est cliquée, une boîte apparaît, vous pouvez taper un nouveau lien, puis le src de l'image est modifié. Tout cela fonctionne très bien, sauf quand je change le lien sur les images suivantes, le script est exécuté sur l'IMG est tiré sur l'image actuelle, ainsi que les images suivantes qui ont été cliqués. (Donc, si je change d'image # 1, et puis changement image # 2, image # 1 et # 2 sont à la fois changé à la deuxième tentative). Je comprends en quelque sorte ce qui se passe parce que l'événement délégué a été propagé à tous les éléments appariés, mais je fais des recherches Google depuis des heures sur la propagation d'événements et je n'arrive à rien.

Voici la fonction qui modifie le lien de l'image cliqué quand appelé:

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

Et est la fonction ici qui attribue le clic délégué, et se fane sous forme de lien:

$('#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); 
    }); 
}); 

Modifier- est ici l'élément où l'URL est entré:

<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

Ok après un ex Après avoir perdu beaucoup de temps, j'ai finalement trouvé une solution qui fonctionne. Sur le gestionnaire d'événements délégué, j'ai ajouté une ligne qui ajoute simplement un indicateur de données sur l'élément cliqué:

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

Puis, sur ma fonction de gestionnaire de bouton, si l'utilisateur clique sur Annuler, il change le drapeau false :

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

dernier, la fonction changeImage J'ai simplement travaillé le drapeau dans la déclaration if afin qu'il vérifie si l'image a été le dernier cliqué ou non. Ensuite, après que l'image a été changée, elle retourne le drapeau à false pour empêcher toute propagation ultérieure.

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