jQuery委任イベントが複数の要素に影響しないようにするにはどうすればよいですか？

Question

これはこれを行う最善の方法ではないと確信していますが、私はこの種の事件でかなりひどいです...私がやっていることは、委任されたイベントをIMGそれらが動的にコンテナに追加されるためです。画像をクリックすると、ボックスがポップアップし、新しいリンクを入力して画像のsrcを変更することができます。これはすべて正常に動作します。ただし、後続の画像のリンクを変更する場合を除き、IMGで実行されるスクリプトは、現在の画像とクリックされた後続の画像で実行されます。 （画像＃1を変更してに変更した場合、変更画像＃2、画像＃1と＃2の両方が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> 

Answer 1

時間がたつと、私はついにその解決策を見つけ出しました。それがfalseにフラグを変更し、ユーザーがクリックでキャンセルした場合、私のボタンハンドラ関数に、

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

その後：委任イベントハンドラでは、私は単純にクリックされた要素にデータフラグを追加する行を追加しました：イメージは、最後の1がクリックしたかどうか、それはチェックするように

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