Question

I have the following code which looks like this:

<div id="container">
// 3 lines other code here
<a hef="#" id="agreelink"><input id="agree" name="agree" value="Agree" style="position:relataive;border-style:none" /></a>
<input id="disagree" name="disagree" value="Disagree" style="position:relataive;border-style:none" />
<input id="abstain" name="abstain" value="Abstain" style="position:relataive;border-style:none" />
// 2 more lines here
</div>

I then have a function where i was using .live() as the elements are dynamic and it kept duplicating the fire, and I need to move to .on(). So my function code I have tried to fire any of those buttons are as follows:

<$('#container').on('click', 'input', function() {
alert($(this).attr('name'));
});

and

<$('#container').on('click', '#agree', function() {
alert($(this).attr('name'));
});

and

<$('#container').on('click', 'a', function() {
alert($(this).attr('id'));
});

But i cannot make it fire, I have searched online and tried and tested it, but I am sure I am not doing something right, just not sure what it is. Can anyone suggest where i am going wrong ?

Thanks

Answer 1

Try to wrap them in $(document).ready()

$(document).ready(function(){

    $('#container').on('click', 'input', function() 
    { 
       alert($(this).attr('id')); 
    });

});