Jquery how to select dynamically created radio button

Question

Jquery how to select dynamically created radio button. I have

<div id="rDataR">
</div>

MY JAVASCRIPT

 <script>
    $(function () {
    var items="<p>";

    for (var i = 0; i < length; i++) {

      items+="<input type='radio' id='myrdb' value='"+i+"'/>"

    }
    items+="</p>"
    $("#rDataR").html(items);

    }
    </script>

I try this, but not working

$('#myrdb').click(function () {
            if ($(this).is(':checked')) {
                alert($(this).val());
            }
        });

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — JJJ, Nov 30 '14 at 11:48
There are many errors in your code. Not closed the function properly, not defined the length, etc. — Bhojendra Rauniyar, Nov 30 '14 at 11:50
You're defining multiple elements with the same id. Don't do that. The id is supposed to be unique in a document. — Artjom B., Nov 30 '14 at 12:54

score 1 · Accepted Answer · answered Nov 30 '14 at 11:48

1

try like following:

$(document).on('click','#myrdb',function () {
        if ($(this).is(':checked')) {
            alert($(this).val());
        }
    });

answered Nov 30 '14 at 11:48

Ibrahim Khan

19,912
7
35
51

score 0 · Answer 2 · answered Nov 30 '14 at 12:09

0

Instead of using duplicate id use class for user inputs then access them:

$(function(){
 $('.myrdb').filter(':checked').click(function(){alert('I am checked')})
});

answered Nov 30 '14 at 12:09

M-Sha

76
1
5

score 0 · Answer 3 · answered Nov 30 '14 at 12:18

You need to change the dynamically added html to

items+="<input type='radio' class='myrdb' value='"+i+"'/>"

Since as per the convention dom id's must be unique.

And the jQuery event handler be like:

$(document).on('click','.myrdb',function () {
  if ($(this).is(':checked')) {
     alert($(this).val());
  }
});

Barilee · Answer 4 · 2014-11-30T12:24:18.257

You logic is correct. You just missed some terminal colons here and there and had one small stray typo and you haven't defined your length. I also changed your radio elements to use class instead of id so they can be uniquely identified consistently. The changes are now as follows:

Your HTML:
<div id="rDataR"></div>

Your JavaScript
<script> $(function() { var items = "<p>"; var length = 10; //added length for (var i = 0; i < length; i++) { items += "<input type='radio' class='myrdb' value='" + i + "'/>"; } items += "</p>"; $("#rDataR").html(items); //corrected the typo #rDataE }); </script>

Your Trigger
$(".myrdb").click(function () { if ($(this).is(':checked')) { alert($(this).val()); } });

Let me know how it goes

Jquery how to select dynamically created radio button

4 Answers4