Adding events to dynamically created checkbox in jquery mobile

Question

I created my check box dynamically in my page. i want to add click event for all checkboxes that dynamically created.

here is my code.

<div data-role="fieldcontain">
         <fieldset data-role="controlgroup" id="br">

        </fieldset> 
</div>

i dynamically created checkboxes and append to fieldset.

$.getJSON("http://localhost/WebSite/",
    function(data){ 
    var branchOp="";
      $.each(data.branch, function(i,item){   
         branchOp += '<input type="checkbox" name="branch" id="'+item.branchCode+'" value="'+item.branchCode+'" class="branch"><label for="'+item.branchCode+'">'+item.branchName+'</label>'; 
         $(item.branchCode).addClass("intro");     
      });
      $('#br').append(branchOp).trigger( "create" );  
      });

i use on(), live(), deligate() method to add event handlers on check boxes.

$('#br').delegate('click','input:checkbox', function(event) {
  alert('selected');
 }); 



$('#br').on('click','input:checkbox', function(event) {
alert('selected');
});

nothing is working for me...

Omar · Accepted Answer · 2013-08-22 11:29:22Z

38

With checkbox / radio buttons, use change event.

Demo

$(document).on('change', '[type=checkbox]', function() {
// code here
});

Also, you can use click but on the div wrapping the checkbox.

$(document).on('click', 'div.ui-checkbox', function() {
  // code here
});

edited Aug 22, 2013 at 11:29

answered Aug 22, 2013 at 11:24

Omar

31.7k9 gold badges73 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emil Over a year ago

I followed your sample and it worked fine but only small thing. I am using asp.net mvc with razor and I created checkbox like this <a Class="list-group-item" href="#" class="add"> @Html.DisplayFor(Function(Model) Model.name) @Html.CheckBoxFor(Function(Model) Model.isSelected) </a> I dont get checkbox is checked when I click inside hyperlink. is your one works because you create checboxradio instead. I dont know what is the difference even thought:)

BlueMystic · Accepted Answer · 2016-01-19 16:30:25Z

2

For a dinamically added Button inside a Collapsible List (or anything) i do this:

$(document).on("click", "#listaEntrada input", function(evt) {
        var txSeleccionado = $(this).text(); //<-El Texto Seleccionado
        console.log(evt);
});

answered Jan 19, 2016 at 16:30

BlueMystic

2,33228 silver badges25 bronze badges

Comments

Udara Herath · Accepted Answer · 2018-02-26 04:22:27Z

1

Try this, it's working for dynamically added checkboxes.

$(document).on("click", "INPUT[id^=checkboxId_]", function (event) {
   var targetId = event.target.id;

   if ($("#" + targetId + ":checked").length > 0) {
      alert('checked');
   }
   else {
      alert('unchecked');
   }
});

answered Feb 26, 2018 at 4:22

Udara Herath

8953 gold badges19 silver badges41 bronze badges

Collectives™ on Stack Overflow

Adding events to dynamically created checkbox in jquery mobile

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related