如何在jQuery Mobile中捕获点击事件或单选按钮？

Question

我有一组使用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>

我需要在点击时显示一个弹出窗口，或者捕获点击事件并手动显示它。问题是jquery mobile会自己渲染这个内容。那么有可能吗？

- user1692333

Answer 1

由于jQuery Mobile会创建新的按钮样式，因此必须将单击事件绑定到假装是按钮的span元素。fieldset必须赋予一个id或任何其他标识符，我们将使用它来访问按钮元素。

无法将单击事件绑定到原始的单选按钮元素，因为它们具有活动的CSS属性display: none;

这里有一个可行的示例：http://jsfiddle.net/Gajotres/dCEnC/

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

- Gajotres

Answer 2

JqueryMobile 1.4.1

在所有找到的解决方案中，除了这个之外，都不适用于我：

$('#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...}

    });

#myFieldset是fieldset的id，#radio-choice-h-2a是触发事件的单选按钮的id。

- sasha

Answer 3

我建议给你的单选按钮取一个名称，然后使用基本的jQuery：

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

当然要将其包裹在document.ready中。

- isherwood

---

这实际上是有效的，当 $(document).on('click','input[name=QuestionID]',QuestionClicked); 无法工作时。 - Phillip Senn

Answer 4

尝试：

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

- darshanags

---

vclick似乎可以工作，但只有在单选按钮本身上点击才有效，而不是标签。实际上，我不得不关闭CSS才能让它工作到这个程度。 - Phillip Senn

Answer 5

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

- user5775138

Answer 6

我已经解决了你的问题

看一下我的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>

- user2164685

---

能否像对话框一样设置背景？ - user1692333

@user1692333 是的，绝对没错，但为此我们需要更深入地了解。 - user2164685