How to catch a click in jQuery mobile or radio button?

Question

I have a set of buttons using jquery mobile :

 <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" style="text-align:center"> <input id="radio1" name="" value="site" type="radio"> <label for="radio1"> Site </label> <input id="radio2" name="" value="transmitter" type="radio"> <label for="radio2"> Transmitter </label> <input id="radio3" name="" value=" channel" type="radio"> <label for="radio3"> Channel </label> </fieldset> 

And I need to show a popup when clicked or click and show it manually. The problem is that jquery mobile independently displays this content. So can this be done?

Answer 1

Since jQuery Mobile creates new button styles, the click event must be bound to the span element, pretending to be a button. Fieldset must have an identifier or any other identifier, we will use it to access the elements of the button.

The Click event cannot be attached to the source elements of the radio, because they have an active css properties screen: none;

Here is a working example: http://jsfiddle.net/Gajotres/dCEnC/

 $(document).on('pagebeforeshow', '#index', function(){ $('#custom-fieldset').find('.ui-btn').on('click', function(){ $('#popupBasic').popup('open'); }); }); 

Answer 2

I would put the name in my radio buttons, then a few basic jQuery:

 $('input[name="myRadioName"].click(function() { alert('You clicked' + $(this).val()); } 

Wrap it in document.ready, of course.

Answer 3

Try:

 $( document ).on( "vclick", "input:radio", function() { console.log("click"); }); 

Answer 4

Jquerymobile 1.4.1

Of all the solutions found, none worked for me, except for this:

 $('#myFieldset').find('[type="radio"]').on('click', function( event ){ console.log("Yes"); if ($(this).attr("id") == "radio-choice-h-2a") { // do something... } else { // do something else...} }); 

where #myFieldset is the field set identifier AND #radio-choice-h-2a identifier of the radio object that fires the event.

Answer 5

I solved your problem

Take a look at my violin

http://jsfiddle.net/nikhilagrawal60/hB4CF/

 <a href="#popupBasic" data-role="button" data-rel="popup">Reject & SMS</a> <div data-role="popup" id="popupBasic" data-theme="c" class="ui-corner-all"> <form> <div style="padding: 10px 20px;"> <h3>Please enter reason</h3> <label for="un" class="ui-hidden-accessible">Reason:</label> <textarea cols="40" rows="8" name="textarea" id="un" data-theme="c" placeholder="Reason"></textarea> <button type="submit" data-theme="c">Ok.</button> </div> </form> </div> 

Answer 6

 <fieldset data-role="controlgroup" data-type="horizontal" id="custom-fieldset"> <label for="utilPlayBtn">Record</label> <input type="radio" name="rbtn" id="utilPlayBtn" value="rb1" checked="checked"/> <label for="utilRecordBtn">Play</label> <input type="radio" name="rbtn" id="utilRecordBtn" value="rb2"/> </fieldset> $('#custom-fieldset').click(function() { if ($("#utilPlayBtn").is(":checked")) { alert("PlayChecked"); }else{ alert("PlayNotChecked"); } });