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

Answer 1

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