jquery - jQuery の匿名関数は、イベント委任によって 2 回実行されますが、1 回だけ実行する必要があります

Question

初投稿です。jquery に問題があり、しばらく時間がかかりましたが、問題を解決することができました。今はその理由を知りたいだけです。

AJAX呼び出しを介して画像が取り込まれたライトボックスを介して、一度に2つのフォームフィールドを取り込もうとしているCMSがあります。フィールドの横にある画像の参照ボタンをクリックすると、AJAX 呼び出しが行われ、ライトボックスに一連の画像が入力されます。画像をクリックするとライトボックスが閉じ、適切なフォーム フィールドにその画像のパスが入力されます。

2番目の画像を選択するまで、プロセス全体が機能します。両方のフォーム フィールドに 2 番目の選択が入力されるため、最初に行った選択が消去されます。

function AssetsPicker (el){
  this.el = el;
  this.url = el.attr('href') || '';
  this.gallery = el.data('gallery') || '';      

  this.show_assets = function(){
    //shows a lightbox of the thumbnails
    this.selected_asset();
  }

  //on thumbnail click
  //Grab the image src from the data attribute
  this.selected_asset = function(){
    var gallery = this.gallery, 
        empty_formfield = this.empty_formfield;

            //*************
            this was the problematic event. Works on first click, on second click it would populate both fields with the value.
           ********************//
        $('#lightbox_display').on('click', '.final-asset', function(e){
          e.preventDefault();
          var   el = $(this);
          src = el.data('file');    

          empty_formfield(src, gallery);                
        });
    }

    //empty out the appropriate form field
    //populate appropriate form field with src  
    this.empty_formfield = function(src, field){        
      var targetfield = $('#edit_project').find("[data-field='" + field + "']");                
      targetfield.val('').val(src);     
      console.log("[data-field='" + field + "']");
    }

}//AssetsPicker

var AssetsAjax =  {
    images: function(url, gallery){
        var promise = $.Deferred();         
        $.ajax(url, {
            dataType: 'json',
            contentType: 'application/json',
            success: function(result){
                promise.resolve(result); //when we have a result, then resolve our promise
            },
            error: function(){
                promise.reject('something went wrong. sorry.'); //if an error, then reject our promise
            }

        });//$.ajax         
    return promise;
    }
}//var AssetsAjax


$('#edit_project').on('click', '.gallery-window', function(e){
  e.preventDefault();
  var el = $(this),
    url = el.attr('href');

  var assetspicker = new AssetsPicker(el);                  

  $.when(
    AssetsAjax.images(url)
  ).then(function(result){              
    assetspicker.open_gallery();
    assetspicker.show_assets(result);
  });       
});

このイベントハンドラーを変更したときにのみ、他のフィールドの消去が停止しました

    $('#lightbox_display .final-asset').on('click', function(e){
        //anonymous function unchanged              
    });

HTML

//lightbox that gets populated via AJAX depending on which browse <a> was clicked (thumbnails or large images)
<div id="lightbox_display">
    <a href="thumbs/3d-1.jpg" class="final-asset" data-file="3d-1.jpg"><img src="thumbs/3d-1.jpg"></a>
    <a href="thumbs/3d-2.jpg" class="final-asset" data-file="3d-2.jpg"><img src="thumbs/3d-2.jpg"></a>
    ...
</div>

//elsewhere in the DOM, both applicable fields
<div id="edit_project">
    <div>
        //clicked thumbnail image goes in here
        <input type="text" name="thumb" value="" data-field="thumbs">
        //this triggers the lightbox to show thumbnails
        <a href="file_assets/?q=thumbs" id="browse_thumbs" class="gallery-window" data-gallery="thumbs">Browse Thumbnails</a>
    </div>
    <div>
        //clicked large image goes here
        <input type="text" name="large" value="" data-field="large">
        //this triggers the lightbox to show large images
        <a href="file_assets/?q=large" id="browse_large" class="gallery-window" data-gallery="large">Browse Large Images</a>
</div>
</div>