jQuery的获取父母ID不起作用

Question

I'm not great with JavaScript/jQuery and am having a lot of trouble with a very basic task. I have an img that, when clicked, should give me the id of the parent div it is within.

This is the markup:

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

And here is the javascript:

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

Clicking the image gives me an alert that says "undefined" but I can clearly see that the div has the id of "client-1" when I inspect the page. I must be missing something simple here. I've also tried using .closest as well as passing this into the function but no luck. Thanks for any help!

Answer 1

Don't use the onclick attribute for events. You're using jQuery, bind the events "properly".

Add a class to the image(s):

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

Then bind the event:

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

Answer 2

If you hook up the click event using jQuery instead of doing it inline, then you'll get the this passed in automatically:

Note that you'd have to give the image an id or find another selector for it.

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

Answer 3

You need to pass in this

onclick="ButtonExpandClick(this)"

JS

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

Also it is a bad idea to declare inline events . Attach the event directly using javascript.

<script>

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

</script>

Answer 4

You have to use jquery.click or send your element with function. like sendme(this).

Answer 5

You can use something like this:

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

Example working at Jsfiddle

It's recommended put this images inside a container. and change this to. It's better for performance.

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

});

Answer 6

Simpler still you might try this with a binding:

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