Jquery mobile 可以在JQuery移动表单标签中使用链接吗？

我在使用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>

接收我们的电子邮件
我同意这个建议

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

更新

---

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

可以做一些改进，但这里有一个粗略的草稿：

JS

HTML

接收我们的电子邮件
我同意这个建议
T和C
听我说
​

您也可以覆盖事件：

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

---

有相同的问题，并使用以下方法解决：

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

---

因此，如果单击按钮文本中的任何链接，它将在新窗口中打开。如果您想在同一窗口中使用它，只需使用Phil显示的$.mobile.changePage。

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

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

---

我在jQuery Mobile 1.1.0和jQuery 1.7.2上尝试了上述解决方案，但没有成功

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

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

改为使用on（）和off（）

---

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

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

---

在Android上，上述解决方案在Android上不起作用

仅当在

pagecreate

上使用并且没有事件委派时，它才起作用

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

        return false;
    });
} );

---

将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/

---

谢谢Florian，我会尽我最大的努力尝试一下，然后回复你。救了我一天，非常感谢你！只是一个小小的改进：实际上可以使用

this.href

而不是使用

$（this.attr（'href'）创建jQuery对象@SunilMishra:href中缺少“http://”。但即使如此，由于JSFIDLE中的同源策略，它也无法工作，只需检查浏览器开发工具的控制台输出即可。@PhilippRieber我甚至尝试过使用localpage（即使用类似于#page的内容），但无法工作：（这个解决方案对我更有效，因为我需要在一个新窗口中打开链接。$.mobile.changePage使调用页处于一个中止的转换状态这对我更有效：
$（'label'）。each（function（）{var e=$（This）.data（'events'）；$（This）.off（）；$（This）.not（'a'）。on（e）；）；
$(document).on('pagecreate', function(event, ui) {
    $(".ui-checkbox a").on("click tap", function() {
        $(':mobile-pagecontainer').pagecontainer('change', this.href);

        return false;
    });
} );

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

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