jQuery得到父ID不起作用

时间:2013-07-29 20:35:14

标签: javascript jquery

我对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传递给函数但没有运气。谢谢你的帮助!

6 个答案:

答案 0 :(得分:3)

不要将onclick属性用于事件。您正在使用jQuery,“正确”绑定事件。

为图像添加一个类:

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

然后绑定事件:

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

答案 1 :(得分:1)

如果您使用jQuery挂钩click事件而不是内联,那么您将自动传入this

请注意,您必须为图片添加id或为其找到另一个选择器。

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

答案 2 :(得分:0)

您需要传递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>

答案 3 :(得分:0)

您必须使用jquery.click或使用函数发送元素。像sendme(这)。

答案 4 :(得分:0)

您可以使用以下内容:

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

Jsfiddle

工作的示例

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

$(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);
    });

});

答案 5 :(得分:0)

更简单的是你可以尝试使用绑定:

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