JQuery: register events on ajax generated event

Question

Following code has been generated through ajax:

<div class="momento-rating-input">
    <div>Rate this post</div>
    <div>
        <input type="radio" name="rateit" value="3" style="margin: 0 0.5ex 3px;" class="ratems" />Good
        <input type="radio" name="rateit" value="2" style="margin: 0 0.5ex 3px;" class="ratems" />Average
        <input type="radio" name="rateit" value="1" style="margin: 0 0.5ex 3px;" class="ratems" />Bad
    </div>
</div>

Now in Javascript/JQuery, I need to clear selected radios. I try following code.

$('input[type="radio"]').each(function(){
    if($(this).hasClass('ratems')){
        $(this).checked = false;
    }
});

Above code is not working. I know we should use JQuery live or on functions to register events on AJAX generated elements.

However I don't want to register any event, but to clear radio buttons in on a different event, that is firing without any issue.

How can I clear those radio buttons?

Little context, if needed: This code is implemented on a light box and pressing left/right keys change images. For new image, rating radio buttons should be cleared.

So when did you want to clear the selected radios? based on what event? — xdazz, Oct 05 '12 at 10:33
On image change event, that is triggered by `left`/`right` key. That event is working as image and comments are changing through ajax. Any ways problem was wrong code, corrected by accepted answer. — Kapil Sharma, Oct 05 '12 at 10:45

Curtis · Answer 1 · 2012-10-05T10:50:00.483

1

Simply remove the checked attribute from the element:

$('input[type="radio"].ratems').removeAttr("checked");

edited Oct 05 '12 at 10:50

answered Oct 05 '12 at 10:31

Curtis

101,612
66
270
352

Thanks. I simple saw http://stackoverflow.com/questions/7044301/jquery-unselect-group-of-radio-buttons and got the code from there, without giving it second thought. My bad. – Kapil Sharma Oct 05 '12 at 10:43

score 1 · Answer 2 · answered Oct 05 '12 at 10:37

1

You should try replacing $(this).checked = false; with $(this).removeAttr('checked');.

answered Oct 05 '12 at 10:37

boz

4,891
5
41
68

score 1 · Accepted Answer · answered Oct 05 '12 at 10:41

1

You may try this to uncheck a radio buton with class name ratems

$('input[type="radio"].ratems').prop('checked', false);

instead of using $('input[type="radio"]').each(..)

answered Oct 05 '12 at 10:41

The Alpha

143,660
29
287
307

Thanks @Sheik Heera, This is much better solution then what I was trying. – Kapil Sharma Oct 05 '12 at 10:54

JQuery: register events on ajax generated event

3 Answers3