Fire checkbox event with jQuery Mobile

Question

I am using jQuery 1.8.3 and jQuery Mobile 1.2.0.

I am trying to implement the vertically grouped checkboxes.

I need to detect changes on the checkboxes. An example is available here.

However, it doesn't work on my page (which I don't give because it contains too many dependencies but the code is the same).

Basically, when I click a checkbox, the following message should be displayed in the console:

INPUT
module1
-----

Whereas in my page I've got:

FIELDSET
moduleListTitle
-----
DIV
moduleContainer
-----
DIV
(an empty string)
-----

I've spent hours trying to find why the event is not fired correctly.

Has anyone already faced this problem?

You may need to .trigger('refresh') after inserting the checkboxes dynamically. on JSfiddle you provided is working normally. so try $('#moduleListTitle').parent().trigger('refresh'); after ('create') — Omar
– Omar, Commented Mar 7, 2013 at 18:16

Omar · Accepted Answer · 2013-03-07 18:38:06Z

2

After testing the code live - not on JSfiddle - I have reached the below solution.

Since the items are added dynamically, you should bind the event to $(document) and the handler to 'input:checkbox.module'.

Here is the code, I hope it solves your problem.

$(document).on('change','input:checkbox.module', function(){
 console.log(this.tagName);
 console.log(this.id);
 console.log("-----");
});

trigger.('refresh') is not required here.

answered Mar 7, 2013 at 18:38

Omar

31.7k9 gold badges73 silver badges117 bronze badges

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

2 Comments

Omar Over a year ago

I am glad I have been of help :) I really don't know, but I assume that JSF treats them as static elements not dynamic ones. I should dig more into this subject and find out the reason.

Omar Over a year ago

@user3765109 you're welcome. A better method to attach listener to dynamic elements is to delegate change event from parent static element (not added dynamically) e.g. $("#static_parent").on("change", ".dynamic_element", function () { /* code */ });. jsfiddle.net/z4UQC/23 If you have doubts, post a new question :)

Collectives™ on Stack Overflow

Fire checkbox event with jQuery Mobile

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related