How to catch click in jQuery mobile or radio button?
Asked Answered
M

6

5

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 pop-up on click or catch click and show it manually. The problem is that jquery mobile renders this content by itself. So is it possible to do?

Mccaffrey answered 13/3, 2013 at 13:58 Comment(0)
P
7

Because jQuery Mobile creates new button styles, click event must be bound to the span element pretending to be button. Fieldset must be given an id or any other identificator, we will us it to access button elements.

Click event can't be bound to the original radio elements because they have an active css property display: none;

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

$(document).on('pagebeforeshow', '#index', function(){       
    $('#custom-fieldset').find('.ui-btn').on('click', function(){      
        $('#popupBasic').popup('open');
    });    
});
Pyromancy answered 13/3, 2013 at 15:31 Comment(0)
M
1

I'd put a name in your radio buttons, then some basic jQuery:

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

Wrap it in document.ready, of course.

Medullary answered 13/3, 2013 at 14:4 Comment(1)
This actually worked, when $(document).on('click','input[name=QuestionID]',QuestionClicked); didn't work.Musketeer
B
1

Try:

$( document ).on( "vclick", "input:radio", function() {
    console.log("click");
});
Bridwell answered 13/3, 2013 at 14:8 Comment(1)
vclick seems to work, but only if you click on the radio button itself and not the label. I actually had to turn css off to get it to work that far.Musketeer
D
1

JqueryMobile 1.4.1

from all solutions found none worked for me, except this one:

$('#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 id of the fieldset AND #radio-choice-h-2a the id of the radiobutton which is triggering the event.

Drake answered 28/2, 2014 at 9:19 Comment(0)
S
0

I have solved your problem

Take a look at my fiddle

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>
Squeeze answered 13/3, 2013 at 14:13 Comment(2)
is it possible to set up background like in dialog?Mccaffrey
@Mccaffrey yes definitely but for that we need to go more in depth.Squeeze
S
0
<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");
    }
});
Sanorasans answered 11/1, 2016 at 18:40 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.