Question

我正在使用名为Simple Photo Manager的文件上传脚本。当我上传一些图像并且我想要删除其中的一些时，我必须创建一个变量numDeleted（删除的图像数量）

我将描述结果然后我会告诉你代码。如果你知道为什么会这样，请告诉我

结果是：

- 场景：显示三个上传的图像

-I click 1st Delete, div is successfully hidden, then: alert('1')
-I click 2nd Delete, div is successfully hidden, then: alert('2'), alert('3')
-I click 3rd Delete, div is successfully hidden, then: alert('4'), alert('5'),alert('6')

这是上传图片时执行的功能：

function setUploadedImage(imgSrc, fileTempName, divId) {
    var par = window.document;

    var images = par.getElementById('images_container');
    numDeleted = 0;

    var imgdiv = par.getElementById(divId);
    // all its attributes here...

    var image_new = par.createElement('img');
    // all its attributes here...

    var image_label = par.createElement('input');
    // all its attributes here...

    var image_hidden = par.createElement('input');
    // all its attributes here...

    var image_name = par.createElement('input');
    // all its attributes here...

    var image_del_link = par.createElement('input');
    // all its attributes here...

    var br = par.createElement('br');

    imgdiv.appendChild(image_new);
    imgdiv.appendChild(image_hidden);

    imgdiv.appendChild(image_name);
    imgdiv.appendChild(br);
    imgdiv.appendChild(image_del_link);

    $(".deleteit").click(function(){
             $(this).parent().hide();
             numDeleted = numDeleted + 1;
         alert(numDeleted);
        })

Answer 1

由于缺少某些信息，需要做出一些假设，但我认为image_del_link元素具有'deleteit'类。

如果是这样，您将使用该类将新处理程序绑定到DOM中的所有元素。因此，每次设置新的处理程序时，都会将冗余处理程序添加到已存在的处理程序中。

改变这个......

$(".deleteit").click(function(){

到此......

$(image_del_link).click(function(){

...以便仅绑定到新创建的元素。

或者更好的解决方案是使用.on()方法使用事件委派......

$('#images_container').on('click', '.deleteit', function(){...

这应放在setUploadedImage()函数之外，以便它只运行一次。

点击.deleteit内images_container类的任何元素都会触发放置在images_container上的处理程序。

如果您使用的是旧版jQuery，请使用.delegate，而不是.on() ...

$('#images_container').delegate('.deleteit', 'click', function(){...

如果您使用的是真正的旧版本，请升级。

Answer 2

问题是，每次上传新内容时，您都将点击处理程序添加到每个元素和deleteit类。

$(".deleteit").click(function(){  // This is added to *every* existing delete button
     $(this).parent().hide();
     numDeleted = numDeleted + 1;
     alert(numDeleted);
});

所以在第二次上传后，第一个项目有第一个点击处理程序，另一个项目。

.click不会替换现有的处理程序。你可以先删除它们，但这有点重。相反，只需定位您创建的新文件。

我想你想要这个：

$(image_del_link).click(function(){
     $(this).parent().hide();
     numDeleted = numDeleted + 1;
     alert(numDeleted);
});

但是你没有把删除链接代码，所以我不知道这是不是正确的元素。

注意：我会考虑用jQuery做一切。您正在使用普通的javascript调用创建元素。从长远来看，混合和匹配最终会让人感到困惑：

var images = $('#images_container');

var imgdiv = $('#'+divId);

var image_new = $('<img>').attr({id: 'myID', src: 'http://mySrc'});
// OR:
var image_new = $('<img src="http://mySrc" id="myID">');

var image_label = $('<input>').attr({...});

var image_hidden = $('<input>').attr({...});

var image_name = $('<input>').attr({...});

var image_del_link = $('<input>').attr({...});

imgdiv.append(image_new);
imgdiv.append(image_hidden);

imgdiv.append(image_name);
imgdiv.append('<br>');
imgdiv.append(image_del_link);

在Javascript中，我的1-by-1增量为1,3,6,10

2 个答案: