jQuery click dynamic element

Question

See the code's comment:

$.each($('input[type="radio"]'), function(){
    var input = $(this);
    var container = $('<div class="radio"></div>');
    var mark = $('<span />');

    input.wrap(container).after(mark);

    container.click(function(){
        alert('test'); // Not triggered.
    });
});

The html is:

<input type="radio" value="female" name="gender" />

Anyone know why the alert is not triggered when clicked, and yes it is visible in CSS. When I use :

console.log(container);

It does give me the HTML it is containing.

Thanks

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

$('body').on('click', 'div.radio', function() {

});

Full Code

$('body').on('click', 'div.radio', function() {
  alert('test'); 
});

$.each($('input[type="radio"]'), function(){
    var input = $(this);
    var container = $('<div class="radio"></div>');
    var mark = $('<span />');

    input.wrap(container).after(mark);
});

NOTE

Instead of body, you should use a static-element that is the container of container.

Why you need this

You need delegate event handler, as your element added to DOM dynamically that means. after page load.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 11, 2012 at 17:57

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

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

1 Comment

Terry Over a year ago

Why did you add that note about the body? Using the document element is actually recommended as per the jQuery documentation. "Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers."

Mouloud · Accepted Answer · 2012-06-11 18:43:25Z

after some tested it seems to me that the "wrap" clone the object you pass it as argument, or reference to the object is lost but I'm not so sure.

a first solution is to assign the event "onclick" before moving the object in the "wrap".

$.each($('input[type="radio"]'), function(){
    var input = $(this);
    var container = $('<div class="radio"></div>');
    var mark = $('<span />');

    $(container).click(function(){
        alert('test'); // triggered now.
    });

    input.wrap(container).after(mark);
});

a simplified version :

$.each($('input[type="radio"]'), function(){

    var wrapper = $('<div class="radio"></div>').click(function(){
        alert('test'); // triggered now.
    });

     $(this).wrap(wrapper).after($('<span />'));
});

dont forget to decalare this function in the onload function

$(function(){

   // your code here ....
});

user_v · Accepted Answer · 2012-11-04 15:37:05Z

0

I was also affected by this and found that on is available only with jquery 1.7 and above. I am on jquery 1.4.1 and on is not available with version. Upgrading jquery was something I wanted to avoid.

Thankfully delegate was there and it solved the problem.

answered Nov 4, 2012 at 15:37

user_v

10.2k4 gold badges43 silver badges32 bronze badges

Collectives™ on Stack Overflow

jQuery click dynamic element

3 Answers 3

NOTE

Why you need this

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

NOTE

Why you need this

1 Comment

Comments

Comments

Related