Связывание с jQuery, неправильный порядок? - PullRequest
Новая
       8

Связывание с jQuery, неправильный порядок?

1 голос
/ 14 февраля 2011

У меня есть этот скрипт, который загружает содержимое, и затем должен привязать ссылку удаления, чтобы удалить содержимое.

Однако я обнаружил, что она не связана со ссылкой удаления, даже тогда я помещаю код в функцию, которая должна выполнить повторную привязку. 

$(document).ready(function() {


    function loadImages() {
        $.get('/management/image/get/site_id/1/area/News', function(data) {
            $("#existing-images").html(data);
        });

        $(".deleteImage").click(function() {
            id = $(this).attr('id'); id = id.split('_');
            alert(id);
            /*$.post(second_url+'id/'+id, '', function(theResponse) {
                $("#image_"+id+"").remove();
            });*/
        });
    }


    $("#fileInput").uploadify({
        'uploader'       : '/library/jquery/uploadify/uploadify.swf',
        'script'         : '/gallery/image/area/site_id/<?php echo $site->id; ?>/area/<?php echo $this->area; ?>',
        'cancelImg'      : '/library/jquery/uploadify/cancel.png',
        'folder'         : '/images/Image/',
        'multi'          : true,
        'onAllComplete'  : function(e, queueId, file, response, data) {
            $('#fileInput').uploadifyClearQueue();
            loadImages();
        },
    });


    loadImages();


});

Ответы [ 3 ]

1 голос
/ 14 февраля 2011

вы связываете ссылку для удаления до завершения запроса ajax.

1 голос
/ 14 февраля 2011

Вы можете использовать функцию $. Live для динамического связывания удаленных ссылок вместо того, чтобы делать это каждый раз, когда вы делаете запрос.

попробуйте что-то вроде: 

//..init code
$(".deleteImage").live('click',function() {
        id = $(this).attr('id'); id = id.split('_');
        alert(id);
});

function loadImages() {
    $.get('/management/image/get/site_id/1/area/News', function(data) {
            $("#existing-images").html(data);
    });
}

//more code here...
0 голосов
/ 14 февраля 2011

Это из-за асинхронного характера вызова ajax.

Код, который вы написали, пытается привязать событие click к кнопке, которая еще не была введена в DOM

Tryизменив код на: 

$(document).ready(function() {


    function loadImages() {
        $.get('/management/image/get/site_id/1/area/News', function(data) {
            $("#existing-images").html(data);

            $(".deleteImage").click(function() {
                id = $(this).attr('id'); id = id.split('_');
                alert(id);
                /*$.post(second_url+'id/'+id, '', function(theResponse) {
                    $("#image_"+id+"").remove();
                });*/
            });
        });


    }



    $("#fileInput").uploadify({
        'uploader'       : '/library/jquery/uploadify/uploadify.swf',
        'script'         : '/gallery/image/area/site_id/<?php echo $site->id; ?>/area/<?php echo $this->area; ?>',
        'cancelImg'      : '/library/jquery/uploadify/cancel.png',
        'folder'         : '/images/Image/',
        'multi'          : true,
        'onAllComplete'  : function(e, queueId, file, response, data) {
            $('#fileInput').uploadifyClearQueue();
            loadImages();
        },
    });


    loadImages();
});

Перемещение привязки в обратный вызов успеха вызова $.get гарантирует, что новый html был введен до того, как привязка произойдет.

Альтернативно попробуйте поискатьиспользовать делегат вместо привязки к элементу, таким образом, вам не нужно постоянно перепривязывать

...