onclick of parent of element

Question

I am using the following code:

$("#jplayer_playlist_item_" + i).data("index", i).click(function () {
  var index = $(this).data("index");

  if (playItem != index) {
    playListChange(index);
  } else {
    $("#jquery_jplayer").jPlayer("play");
  }

  $(this).blur();

  return false;
});

I am trying to get it so that when I click on the parent of "#jplayer_playlist_item_" + i" (which is a li) it continues with this function as it would if I had clicked the item itself.

I have tried to put .parent right before .click but it did not work.

Thanks

Answer 1

If you want a click on the item and the parent to both be hooked up to the event handler, you could do this:

var item = $("#jplayer_playlist_item_" + i);
item.add(item.parent()).data("index", i).click(function() {
    ...
}

This will get your normal item into a jQuery object, then add the parent object to the select and then apply both the data("index", i) and the click handler to both item and click handler.

If we could see the actual HTML involved here, it's probably also possible to use delegated event handling and event bubbling to handle the click in one place for either element.