Re: [jQuery] jquery uploadify question

See:

http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

In a nutshell, you're declaring a click handler for all elements with
class 'img_del' *when the page loads*. But your element is being added
during the onComplete callback of uploadify() so it has no click
handler assigned to it. To get around that, you would place the
$(".img_del").click(function () { etc. code in a function and call the
function both when the page first loads as well as after adding a new
element.

Or, you can deal with it the simpler way and use the new live() function:

http://docs.jquery.com/Events/live

Using this, you can assign an event handler to any elements on the
page *and* tell jQuery to do the same for any new elements added that
match the selector criteria.

eg.

$(".img_del").live('click', function() {
var image_name = this.id;
$.ajax({
type: "get",
url: "inc/ajax_del_pic.php?img="+image_name,
success: function(msg){
alert(msg);
}
});
});

On Thu, Nov 26, 2009 at 12:57 PM, heohni
<heidi.anselstetter@consultingteam.de> wrote:
> Hi,
>
> This function:
>
> var c_folder = $('input[name="client_folder"]').val();
>        $("#uploadify").uploadify({
>                'uploader'       : 'inc/fileupload/uploadify.swf',
>                'script'         : 'inc/fileupload/uploadify.php',
>                'scriptData'     : {'c_folder': c_folder},
>                'cancelImg'      : 'inc/fileupload/cancel.png',
>                'folder'         : 'images/uploads',
>                'queueID'        : 'fileQueue',
>                'auto'           : true,
>                'multi'          : true,
>                'queueSizeLimit' : 3,
>                'buttonText'     : 'Auswahl',
>                'sizeLimit'              : 10000000,
>                'fileDesc'               : '*.jpg;*.jpeg;*.png',
>                'fileExt'                : '*.jpg;*.jpeg;*.png',
>                'onComplete': function(event, queueID, fileObj, reposnse, data) {
>                $('#filesUploaded').append('<img src="inc/fileupload/
> cancel.png" alt="" id="'+c_folder+'/'+fileObj.name+'" class="img_del"
> border="0" style="padding-right:5px; cursor: pointer;"><a
> target="_blank" href="images/uploads/'+c_folder+'/'+fileObj.name
> +'">'+fileObj.name+'</a><br><br>');
>                        $('#fileQueue').css({'display' : 'none'});
>                        $('#cancel').css({'display' : 'none'});
>                }
>        });
>
>        $(".img_del").click(function () {
>                var image_name = this.id;
>                $.ajax({
>                        type: "get",
>                        url:  "inc/ajax_del_pic.php?img="+image_name,
>                        success: function(msg){
>                                alert(msg);
>                        }
>                });
>        });
>
> The Script is uploading the pics great and shows me the delete image.
> But on click, the function to delete the picture is not getting called
> and I don't get why?
> Any ideas why it seams that the element img_del seem not available?
>