Question

我在使用jQuery Mobile时遇到了一个奇怪的问题。

我在表单元素标签中有一个链接 - 确切地说是一个复选框标签，但链接不起作用。

我试过阅读文档，但似乎无法找到任何内容。

这是我的标记：

<div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
        <input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
        <label for="OptIn">Receive E-mails From Us</label>

       <input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
       <label for="tandc">I agree to the <a href="/tandcs.html" target="_BLANK" >Terms & Conditions</a></label>   
   </fieldset>
</div>

单击链接时，只需切换复选框状态。

更新

刚刚意识到我可以通过右键点击打开链接，但显然是在一个不太有用的移动设备上....

Answer 1

这是移动和非移动浏览器的正确解决方案

$('.ui-checkbox a').bind("tap click", function( event, data ){
    event.stopPropagation();
    $.mobile.changePage($(this).attr('href'));
});

Answer 2

遇到同样的问题并使用以下方法解决：

$('.ui-btn-text a').click(function(event) {
    var $this = $(this);
    window.open($this.attr('href'), $this.attr('target'));     
});

因此，如果点击按钮文本中的任何链接，它将在新窗口中打开。如果你想在同一个窗口中使用$ .mobile.changePage就像Phil所示。

Answer 3

我在使用jQuery 1.7.2的jQuery Mobile 1.1.0上尝试了上述解决方案但没有成功。

经过一些修补和阅读新的jQuery事件函数后，我提出了自己的解决方案，使标签中的所有锚点都可以点击，而不会丢失标签其余部分的jQuery Mobile默认行为：

jQuery('label').each(function(){
    var e = jQuery(this).data('events');
    jQuery('.agree label').undelegate();
    jQuery('.agree label *:not(a)').delegate(e);
});

Answer 4

使用on（）和off（）代替

$('label').each(function(){
  var e = $(this).data('events');
  $('label').off();
  $('label').not('a').on(e);
});

Answer 5

可以做出一些改进，但这是一个草稿：

http://jsfiddle.net/KADqA/

JS

$('.ui-btn-text').click(function(event) {
    var checked = $("#tandc[type='checkbox']").is(":checked");
    var $this = $(this);

    if($this.children('a').length) {
        $.mobile.changePage('#tc', {
            transition : 'pop',
            role       : 'dialog'
        });
    }
    stateOfCheckbox(checked);
});

function stateOfCheckbox(checked) {
    $('#home').live( 'pagebeforeshow',function(event){
        $("#tandc[type='checkbox']").attr("checked",checked).checkboxradio("refresh");
    });
}

HTML

<div data-role="page" id="home">
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
            <input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
            <label for="OptIn">Receive E-mails From Us</label>

           <input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
           <label for="tandc">I agree to the <a href="#tc" data-rel="dialog" >Terms &amp; Conditions</a></label>   
       </fieldset>
    </div>
</div>
<div data-role="page" id="tc">
    <div data-role="header"> 
        <h1>T and C</h1> 
    </div>
    Read me
</div>

Answer 6

您也可以覆盖该事件：

 $('.ui-checkbox a').click(function(e) {
            e.stopPropagation();
 })

Answer 7

在Android上，上述解决方案无法在Android上运行。

仅在pagecreate上使用且没有事件委派时才有效。

$(document).on('pagecreate', function(event, ui) {
    $(".ui-checkbox a").on("click tap", function() {
        $(':mobile-pagecontainer').pagecontainer('change', this.href);

        return false;
    });
} );

Answer 8

如果您想在弹出窗口中打开链接，这是可行的解决方案。

    $('.ui-checkbox a').bind('click tap', function (event) {
        event.stopPropagation();
        $($(this).attr('href')).popup('open');
    });

Answer 9

将ID或类添加到父标签中有一个标签并使用@alex dms的脚本

$('#field-contain label a').bind("tap click", function( event, data ){
    event.stopPropagation();
    $.mobile.changePage($(this).attr('href'));
});

尝试一下，在我的手机和桌面上完美地工作

https://jsfiddle.net/vulieumang/p91zhmnp/

是否可以在JQuery Mobile Form Label中使用链接？

9 个答案: