jQuery获取父id不起作用

jQuery get parent id not working

本文关键字：不起作用 id 获取 jQuery      更新时间：2023-09-26

我不擅长JavaScript/jQuery，在一项非常基本的任务上遇到了很多麻烦。我有一个img，单击它时，应该会给我它所在的父div的id。

这是标记：

<div id="client-1">
    <img src="~/Content/plus.ico" alt="plus" onclick="ButtonExpandClick()" />
</div>

这是javascript：

<script type="text/javascript">
    function ButtonExpandClick() {
        alert($(this).parent().attr("id"));
    }
</script>

单击该图像会给我一个警告，上面写着"未定义"，但当我检查页面时，我可以清楚地看到div的id为"client-1"。我一定错过了一些简单的东西。我还尝试过使用.closest以及将this传递到函数中，但没有成功。谢谢你的帮助！

不要将onclick属性用于事件。您正在使用jQuery，请"正确"绑定事件。

向图像添加类：

<img src="~/Content/plus.ico" alt="plus" class="icon" />

然后绑定事件：

$(function(){
    $('.icon').click(function(){
        alert($(this).parent().attr("id"));
    });
});

如果使用jQuery而不是内联连接点击事件，则会自动传入this：

请注意，您必须给图像一个id或为其找到另一个选择器

jQuery(document).ready(function() {
    jQuery("#myImg").click(ButtonExpandClick);
});

您需要通过this

onclick="ButtonExpandClick(this)"

JS

function ButtonExpandClick(elem) {
   alert($(elem).parent().attr("id"));
}

另外，声明内联事件也是个坏主意。使用javascript直接附加事件。

<script>
   $(function() {
       $('#client-1 img').click(function() {
           alert($(this).parent().attr("id"));
       });
   });
</script>

您必须使用jquery.click或发送带有函数的元素。比如sendme（这个）。

更简单的是，您可以尝试使用绑定：

<div id="client-1">
  <img src="~/Content/plus.ico" alt="plus"  />
</div>
<script>
  $(function() {
    $('img').on('click', function(){
      // Two ways to do the same thing
      alert(this.parentNode.id);
      alert($(this).parent()[0].id);
    });
  });
</script>

您可以使用这样的东西：

$(function() {
    $('img').on('click', function(e) {
            var id = this.parentNode.id; //Using javascript to access id is faster.
        alert(id);
    });
});

Jsfidle 工作示例

建议将这些图像放入容器中。并将其更改为。这对性能更好。

$（function（）｛

   var images = $('#container').find('img');
   images.on('click', function(e) {
        var id = this.parentNode.id; //Using javascript to access id is faster.
        alert(id);
    });
});
相关文章：