Binding With jQuery, wrong order?

I have 开发者_开发百科this script that loads in content, and should then bind the delete link to remove the content.

However I'm finding that it isnt binding with the delete link, even then I put the code in a function that should rebind.

$(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();


});

You may use the $.live function to dynamically bind delete links instead of doing it every time you make an request.

try something like:

//..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...

you are binding the delete link before ajax request complete.

It's because of the asynchronous nature of the ajax call.

The code you have writen tries to bind the click event to a button that has not yet been injected into the DOM

Try changing your code to:

$(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();
});

Moving the binding into the success callback of the $.get call makes sure that the new html has been injected before the binding occurs.

Alternativly try looking into using delegate instead of binding to the element, that way you don't need to rebind all the time