jQuery .on() function on click event

Question

I have some DIVs inserted by jQuery. The structure is like this:

<div class="preview_images" id="preview_upload">
     <div class="image_box" id="img_box8793">
         <p>
            <img class="count_19" src="[...]">
            <br>
             <span class="del_img">löschen</span>
         </p>
     </div>
</div>

I want to use the on() function, before I used live(). This is my jQuery function:

$('#preview_upload div p').on("click", "span", function () {
    alert('###');
    parent_div_id = $(this).parent().parent('div').attr('id');
    $(this).parent().parent('div').fadeOut('slow');
    $('#final_img_prev #' + parent_div_id).remove();
    del_val = $(this).attr('title');
    $('#customfields-tf-150-tf,#customfields-tf-16-tf, #customfields-tf-17-tf, #customfields-tf-18-tf, #customfields-tf-19-tf').each(function () {
        if ($(this).val() == del_val) {
            $(this).val('');
            var img_count = jQuery.cookie('img_count');
            new_img_count = parseInt(img_count) - 1;
            if (new_img_count > 0) {
                jQuery.cookie('img_count', '', {
                    expires: -1
                });
                jQuery.cookie('img_count', new_img_count, {
                    expires: 1
                });
                if (new_img_count < 4) {
                    new_file = '<input type="file" id="file1" name="file1">';
                    $('#uploadForm .file_box').html('');
                    $('#uploadForm .file_box').html(new_file);
                    $('#uploadForm').fadeIn();
                }
            }
            return false;
        }
    });
});

The alert() is not getting fired.

Where is the error?

EDIT:

This is my code after your answers:

jQuery(function($){
   $(document).ready(function() {
      $('#preview_upload div p').on("click", "span", function(){
            alert('###');
      });
   });
)};

I am using Jquery 1.7.2. Firebug shows no errros. No alert() is fired.

Maybe it is, because the DIVs and their contents are created dynamically?

are you inserting different divs with the same id? (preview_upload) — Claudio Redi
– Claudio Redi, Commented Aug 14, 2012 at 17:35
Is there a reason your (document).ready is inside the parent function? I don't think it should be. — Jeff Fabiny
– Jeff Fabiny, Commented Aug 14, 2012 at 18:03

Ram · Accepted Answer · 2012-08-14 17:45:49Z

3

When on is used the event should be delegated from one of static parents of the element, the div #preview_upload is generated dynamically, so you should select another element like the body or document object for delegating the event, try this:

$(document).on("click", "#preview_upload span", function(){
   // ..
})

edited Aug 14, 2012 at 17:45

answered Aug 14, 2012 at 17:40

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shyju · Accepted Answer · 2012-08-14 17:35:44Z

1

Wrap this code in the document ready event and it works fine

$(function(){

   $('#preview_upload div p').on("click", "span", function(){
       alert("working")   
      //your code

   });

});

Working sample : http://jsfiddle.net/HBunv/

If that does not work, check for other script errors in your page. Firebug console will be helpful to figureout what is the script error

answered Aug 14, 2012 at 17:35

Shyju

220k106 gold badges420 silver badges498 bronze badges

Comments

Ilia Ross · Accepted Answer · 2012-09-07 11:46:58Z

0

I think you either have an outdated version of jQuery (lower than 1.7) or you run your code before content is loaded to the DOM, which means you need $(document).ready(function().

Your code is working fine in the example below, and alert is firing!

Please check the working jsFiddle example.

edited Sep 7, 2012 at 11:46

answered Aug 14, 2012 at 17:38

Ilia Ross

13.5k11 gold badges56 silver badges89 bronze badges

2 Comments

Ilia Ross Over a year ago

you must remove your jQuery(function($){ on top and in the end remove });and it works, look example jsfiddle.net/rostovtsev/CTjDv

Ilia Ross Over a year ago

You might also have a conflict in your code with other frameworks, try to use jQuery no conflict mode, like this: jsfiddle.net/rostovtsev/2ZVM3

Collectives™ on Stack Overflow

jQuery .on() function on click event

3 Answers 3

Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Related