2

第一次发帖。有一些 jquery 问题，花了一段时间，但我能够解决它，现在我只想知道为什么。

我有一个 CMS，我试图通过一个灯箱填充 2 个表单字段，一次一个，该灯箱通过 AJAX 调用填充了图像。单击该字段旁边的浏览图像按钮，然后进行 AJAX 调用以使用一系列图像填充灯箱。单击图像会关闭灯箱并使用该图像的路径填充适当的表单字段。

整个过程一直进行到我进行第二张图像选择。两个表单域都填充了第二个选择，因此删除了我所做的第一个选择。

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>
4

1 回答 1

2

问题在于$('#edit_project').on('click', '.gallery-window', function(e){每次单击#edit_project元素时都会运行哪个。

在那里，ajax 完成后，你运行assetspicker.show_assets它依次运行$('#lightbox_display').on('click', '.final-asset', function(e){

因此，每次单击时#edit_project，都会为单击添加一个新的处理程序。#lightbox_display.final-asset

因为我无法理解您最终要做什么（由于缺乏完整的 html / 实时示例），所以我建议您每次都取消绑定点击处理程序（这样只有一个保持活动状态）

所以，把里面的代码assetspicker.show_assets改成

$('#lightbox_display')
    .off('click','.final-asset')  // added this line to ubind the existing handler
    .on('click', '.final-asset', function(e){
        e.preventDefault();
        var   el = $(this);
        src = el.data('file');    

        empty_formfield(src, gallery);                
    });
于 2013-09-27T07:19:34.300 回答