0

私は uploadifive を使用しており、実際の画像のアップロードは正常に機能しています。さらに、アップロードが成功したときにアップロードされた画像を表示するように修正しました。ただし、画像が正しくない場合はユーザーが画像を削除できるようにしたいと思います。また、画像が div に追加されているため、on() イベント ハンドラーを、元々 DOM になかった画像にバインドする必要があることはわかっていますが、これを行う方法がわかりません。私の現在のjQuery（画像のアップロードと削除のためのページ更新後の両方で正常に動作します）は次のとおりです。

$('#file_upload').uploadifive({
    'uploadScript' : 'imageUpload.php',
    'removeCompleted' : true,
    'onUploadComplete' : function(file, data) {
        $('.display-images').append(data);
    }
});

$('.display-images img').each(function(){
    $(this).on('click', function(){
        var removeImg = $(this);
        var image = $(this).attr("src");
        var large = image.replace("tmp-images/", "").replace("-tb", "");
        var thumb = image.replace("tmp-images/", "");
        dataString = 'delete=1&large_image=' + large + '&thumb_image=' + thumb;
        $.ajax ({
            type: "GET",
            url: "deleteTempImage.php",
            data: dataString,
            cache: false,
            success: function(data)
            {
                if (data) {
                    $(removeImg).remove();
                }
            }
        });
    });
});

長い目で見れば、クリック イベント ハンドラーを使用して画像を削除するだけではないことに注意してください。これは、動作するようになるまでのテスト目的であり、その後はより堅牢な方法を使用します。

どんな助けでも感謝します。

4

2 に答える 2

0

私が理解しているように、委任を使用する必要があります。on():

ここでは、ドキュメントをデリゲートとして使用しています。適切な方法は、最も近いコンテナー要素をデリゲートとして使用することです。したがって、「.display-images」要素が動的である/動的でない場合は、それをデリゲートとして使用します。

$(document).on('click','.display-images img', function(){
    var removeImg = $(this);
    var image = $(this).attr("src");
    var large = image.replace("tmp-images/", "").replace("-tb", "");
    var thumb = image.replace("tmp-images/", "");
    dataString = 'delete=1&large_image=' + large + '&thumb_image=' + thumb;
    $.ajax ({
        type: "GET",
        url: "deleteTempImage.php",
        data: dataString,
        cache: false,
        success: function(data)
        {
            if (data) {
                $(removeImg).remove();
            }
        }
    });
});
于 2013-05-31T10:23:53.387 に答える
0

ここでイベント委任を設定する方法は適切ではありません。コードを変更する必要があります。

$('.display-images img').each(function(){
    $(this).on('click', function(){
        // Your code here
    });
});

これに

$('.display-images').on('click', 'img', function () {
    // Your code here
});

これにより、要素内の任意のアンカーにイベントがアタッチされ、要素ツリー.display-images全体をチェックする必要が減り、document効率が向上します。

詳細については、こちらをご覧ください:

于 2013-05-31T10:24:40.257 に答える