CODEWITHSUNDEEP
javascriptjqueryhtml
onlineracoon
onlineracoon

Reputation: 2970

jQuery click dynamic element

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

Upvotes: 3

Views: 604

Answers (3)

user_v
user_v

Reputation: 10114

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.

Upvotes: 0

Mouloud
Mouloud

Reputation: 3795

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 ....
});

Upvotes: 1

thecodeparadox
thecodeparadox

Reputation: 87073

$('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.

Upvotes: 5

Related Questions