views:

127

answers:

1

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.

+1  A: 

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

Joseph Silvashy
thanks for that, I am going to use that. But that didnt fix my issue. i fixed it by removing the event after i remove the element
ngreenwood6
I guess your case if one of those assigning event via jquery and also adding markup like 'onclick' at the same time. Yea, you need to remove the 'onclick' from your code or use `removeAttr('onclick')` via JQuery.
o.k.w
o.k.w +1 Removing the event from that onClick and putting all JavaScript in a separate file will do wonders with avoiding confusing and weird collisions.
Joseph Silvashy