CODEWITHSUNDEEP
jqueryjquery-mobileradio-button
user1692333
user1692333

Reputation: 2597

How to catch click in jQuery mobile or radio button?

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?

Upvotes: 5

Views: 6827

Answers (6)

sasha
sasha

Reputation: 365

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.

Upvotes: 1

user5775138
user5775138

Reputation: 1

<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");
    }
});

Upvotes: 0

Gajotres
Gajotres

Reputation: 57309

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');
    });    
});

Upvotes: 7

user2164685
user2164685

Reputation:

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>

Upvotes: 0

darshanags
darshanags

Reputation: 2519

Try:

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

Upvotes: 1

isherwood
isherwood

Reputation: 61036

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.

Upvotes: 1

Related Questions