Question

所以我正在构建一个图像上传器......

我需要能够点击列表中的任何div并让它们消失。简单？呀。

但我也可能在该列表中有div，这些div是在加载页面后动态生成的。

我有ajax处理图像并上传它和诸如此类的东西，并在上传后.append()是一个包含新上传图像的div。

这是我的AJAX代码：

$("#chosenfile").change(function(){
    var data;

    data = new FormData();
    data.append('uploadedfile', $( '#chosenfile' )[0].files[0]);
    $('#loader').css('display','block');
    $.ajax({
        url: '/includes/uploadimage.php',
        data: data,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function ( data ) {
            //console.log(data); //returns a string of the data.
            var json = JSON.parse(data); //parses the string into an object.
            //console.log(json); //logs the object.

            if (json.link) { //If the image is uploaded and returned a link.
                $('#remove').click();
                $('#scrollwindow').append("<div class='you'><img imgid='" + json.id + "' src='" + json.link + "' alt=''><span class='delete'>x</span></div>");
                addToSlider(1);
                $(".delete").click(deleteRowFunct);
                $('#loader').css('display','none');
            };
        }
    });
});

$(".delete").click(function(){
    deleteRowFunct;
        addToSlider(-1);
});

这允许用户删除一行。当触发此函数时，它将删除数据库中的行（当前它试图删除该行两次，因为.click（）事件和函数在两个地方定义。）这不是什么大问题...我意思是它基于行ID，所以我不在乎它是否试图删除它两次..

但是现在我不仅需要删除数据库中的行，还需要调整div的大小，其中包含保存图像的div列表...那就是我的代码停止工作的地方......

我每次上传图片时都会使用addToSlider(1);来查找图片的大小，并相应地调整包装div的大小。

这很好......

现在我想在删除行时addToSlider(-1);找到图像的大小并相应地调整包装div。

我尝试了什么：

如果我将addToSlider(-1);添加到ajax if(data.link)，则只会在上传图片后调整大小。

如果我在代码末尾的addToSlider(-1);事件中添加$(".delete").click()，则只会在页面加载时已经存在的图像上调整大小，而不是动态上传的图像。

^^上面显示的代码。

如果我将addToSlider(-1);添加到实际deleteRowFunct()，则会减去两倍的尺寸...

问题：

如何调用'deleteRowFunct（）'和addToSlider(-1); ONLY ONCE并将.click()事件应用于页面加载时生成的动态生成的div和div？

Answer 1

你可以使用on jquery

$(document).on('click', '.delete', function(){
 deleteRowFunction(this);
});

这会将事件添加到动态生成的元素中。

编辑：让你的deleteRowFunction接受一个参数并将其传递给它。这样你的功能可以使用它。

function deleteRowFunction(thing){
 $(thing).doSomething();
}

Answer 2

尝试使用此方法：

$(".delete").live('click', function(e){
  // do stuffs
});

http://api.jquery.com/live/

jQuery - 我必须两次调用此函数吗？ - 结构问题

2 个答案: