更新1

Question

I'm having trouble in getting the <a>-tag to work inside a <label>-tag on Tablets and Mobile Devices.

What i want is that the <label> should be clickable to check the checkbox, and the <a> should be clickable to open up a Lightbox.

The Problem:

If I use the code down below the <a> is nested in the <label>, so the <a> is not clickable on Mobile Devices and the Lightbox doesn't trigger. The Code Below works on Desktop whatsover.

$('a').click(function() {
  alert('Hello');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="foo" name="bar" value="1">
<label for="bar">You can <a href="#" data-type="inline" id="lightbox" >Click to open Lightbox</a></label>

And if I use this code Snippet the Lightbox Triggers on Click/Touch but the label Text isn't clickable on Mobile Devices to check the Checkbox.

$('a').click(function() {
  alert('Hello');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="foo" value="1">
<label for="foo">Click me <a href="#" data-type="inline" id="lightbox"> to open a Lightbox</a></label>

Answer 1

尝试使用这些

$(document).on('click touchstart', function () {

或

$(document).on('click touch', function () {

Answer 2

在iPad和桌面上测试

请注意，这些都是非常原始的草图。当更清楚哪种方法朝着正确的方向发展时，我将提供更通用，更清洁的解决方案......

我做的最显着的改变是略微改变标记（所以说＆＃34;去嵌套＆＃34; <a>）这使得它变得更加简单。
另外，我在<label>和<a>之间添加了一些功能，这可能是作者想要的（但只是猜测）。

＆＃13;

$('a').click(function() {
  if (this.className == 'add-1') {
    $(this).prev().click();
  } else if (this.className == 'add-2') {
    alert('Hello');
  }
  alert('Hello');
});

$('label').click(function() {
  if (this.className == 'add-2') {
    $(this).next().click();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="foo" value="1">
<label for="foo">Click me to toggle checkbox </label>
<a href="#" data-type="inline" id="lightbox">Click me to open a Lightbox</a>

<hr>

<input type="checkbox" id="foo1" value="1">
<label for="foo1">Click me to toggle checkbox </label>
<a href="#" data-type="inline" id="lightbox" class="add-1"> Click me to toggle checkbox AND open a Lightbox</a>

<hr>

<input type="checkbox" id="foo2" value="1">
<label for="foo2" class="add-2">Click me to toggle checkbox  AND open a Lightbox</label>
<a href="#" data-type="inline" id="lightbox"> Click me to open a Lightbox</a>

＆＃13;

更新1

＆＃13;

$('.listen').click(function( event ) {
  if ('A' === event.target.nodeName) {
    alert('Hello Lightbox');
    return false; // stop bubbling
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="listen">
  <input type="checkbox" id="bar" name="bar" value="1">
  <label for="bar">Click me <a href="#" data-type="inline" class="lightbox">Click me to open a Lightbox</a> to toggle checkbox </label>
</div>

＆＃13;

更新2

＆＃13;

$('a').click(function( event ) {
  alert('Hello Lightbox');
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="bar" name="bar" value="1">
<label for="bar">Click me <a href="#" data-type="inline" class="lightbox">Click me to open a Lightbox</a> to toggle checkbox</label>

＆＃13;

<a> Tag not clickable when it is inside a <label> Tag (Mobile devices)

2 个答案:

更新1

更新2