Question

ok so basically I have this:

<div id="tabs">
 <div id="unique_id" class="tab_link" onclick="changeTab(this);">
  <div id="tab_link_image" onclick="closeTab(this);">
   <image src="image.jpg" />
  </div>
 </div>
</div>

Now in the closeTab function I have it removing the tab from the page. In the changeTab function I have it toggling a class that is either active or notactive foreach of the tab_link classes based on the tab_links id (the id is unique for each one). In the closeTab function at the end I call the changeTab function to make the very first tab active. When you click on a tab_link everything works fine. However, when you click on the the tab_link_image to close the tab there is a problem. It closes the tab fine, calls changeTab and sets the tab to active, but it also fires the changeTab function again from the original tabs onclick event. Is there a way to make this not fire when the tab_link_image is clicked. Hopefully that makes sense.

Answer 1

Take a look at event bubbling, and proper event binding, I think you’ll find a lot of good info at the jQuery docs