Question

这里有一个子div在锚标签内部，如何获得子div的click事件，例如，如果用户点击具有类.press_me警告消息的div显示，并且如果用户点击主div上的任何地方它应该重定向到各自的锚链接

HTML：

<a href="https://www.google.co.in"><div class="dv_child"> America <div class="press_me">click me</div></div></a>
 <a href="https://www.google.co.in" target="_blank"><div class="dv_child"> India <div class="press_me">click me</div></div></a>
<a href="https://www.google.co.in" target="_blank"><div class="dv_child"> Russia <div class="press_me">click me</div></div></a>
<a href="https://www.google.co.in" target="_blank"><div class="dv_child"> Germany <div class="press_me">click me</div></div></a>

JQUERY：

$(".press_me").on('click', function () {
    alert($(this).parent().html());
});

Answer 1

使用$(this)代替$this。您也可以使用event.stopPropagation()停止将子点击传播到父级。

在您的情况下，您只需要阻止锚标记的默认行为。为此，请使用event.preventDefault()

$(".press_me").on('click', function (e) {
    e.preventDefault()
    alert($(this).parent().html());
});

Updated fiddle

Answer 2

使用event.preventDefault它会停止默认操作

$(".press_me").on('click', function (event) {
     event.preventDefault();
    alert($(this).parent().html());
});

Fiddle

Answer 3

此外，您还必须更新第一个元素锚：

<强> HTML

<a href="https://www.google.co.in" target="_blank"><div class="dv_child_1"> America <div class="press_me">click me</div></div></a>

<a href="https://www.google.co.in" target="_blank"><div class="dv_child_1"> India <div class="press_me">click me</div></div></a>

<a href="https://www.google.co.in" target="_blank"><div class="dv_child_1"> Russia <div class="press_me">click me</div></div></a>

<a href="https://www.google.co.in" target="_blank"><div class="dv_child_1"> Germany <div class="press_me">click me</div></div></a>

JS （与已建议相同）

$(".press_me").on('click', function (event) {
    event.preventDefault();
    alert($(this).parent().html());
});

<强> JSFIDDLE DEMO

div点击锚标签不工作jquery

3 个答案: