Question

我有以下html：

<a href="#">
    <div id="post-<?php echo $i++; ?>"></div>
    <div class="like-icon-container">
        <span class="icon-thumbs-up"></span>
    </div>
</a>

一位听众可以选出点击链接的ID：

<script type="text/javascript">
$(document).ready(function() {
    $("a").click(function(event) {
        alert(event.target.id);
    });
});
</script>

脚本在以上示例中不起作用，我试图链接div中的图标（它不是图像，而是用css渲染的字体图标）。但是如果我在第一个div中添加文本，脚本就可以了：

<a href="#">
    <div id="post-<?php echo $i++; ?>">asdfasdf</div>
    <div class="like-icon-container">
        <span class="icon-thumbs-up"></span>
    </div>
</a>

如何在不在第一个div中添加文本的情况下使其工作？

Answer 1

你不应该把div放在一个锚元素中。我建议你这样做：

<div id="post-<?php echo $i++; ?>" class="clickable like-icon-container"><span class="icon-thumbs-up"></span></div>

CSS（指针光标）：

.clickable { cursor: pointer; }

然后是JS：

<script type="text/javascript">
$(document).ready(function() {
    $(".clickable").click(function() {
        alert($(this).attr('id'));
        // alternatively:
        alert(this.id);
    });
});
</script>

Answer 2

你可以试试这个

$(document).ready(function() {
    $("a").click(function() {
        var id = $(this).children(":first").attr("id");
        alert(id);
    });
});

见

JS Fiddle

Answer 3

首先尝试将b / w设为div而不是文本（如果这不起作用）将一个类应用于div（s）并在单击该类时获取函数调用

        <div id="post-<?php echo $i++; ?>" class="isclicked"></div>
        <div class="like-icon-container">
            <span class="icon-thumbs-up"></span>
        </div>


    $(document).ready(function() {
        $(".isclicked").click(function() {
        console.log($(this).attr('id'));
        });
    });

如何让Jquery事件监听器与div链接一起使用？

3 个答案:

JS Fiddle