2

I have this code

<h3> <a href="#" > Edit </a>.... </h3>
<div> ... </div>

I have the same code as in the official jquery UI accordion here

http://jqueryui.com/accordion/

Now there when i click on h3 then the div slides down and when i click on h3 again then it slides up. This is working fine without any problem.

Now currently i have the EDIT text inside the h3 tag. Now i am opening the lightbox when someone clicks on edit.

But as edit is inside the h3 tag , when click on edit link , the accordion also closes or opens.

I want that if i click on edit , then accordion should not open but if someone clicks anywhere on the bar , then it should work as it is

Mirage
  • 30,868
  • 62
  • 166
  • 261

1 Answers1

5

On the click of your edit button use event.stopPropagation();

Here's the documentation

Complete fiddle

$('a.button').click(function() {
  event.stopPropagation(); 

  /* Do your stuff */

  return false;   
})

Also found an interesting read here

Community
  • 1
  • 1
VVV
  • 7,563
  • 3
  • 34
  • 55
  • Weird I tried it on the jquery ui site and it worked. Let me work up a fiddle. – VVV Oct 19 '12 at 02:08
  • Thanks buddy , i have so much other stuff as well , i will go through every step to see where is the problem. in my function i am calling `function () { stopprogagation--$.ajax -- return false }`. i am using `live` function for clicking. is that can cause diff – Mirage Oct 19 '12 at 02:19
  • Found the problem , its not working with `live -click` and not even with `on`, but working with simple click – Mirage Oct 19 '12 at 02:27
  • Glad to see you found it. Very strange that it doesn't work with . on(). I will look at it tomorrow. – VVV Oct 19 '12 at 02:36
  • It does work with .on(). Look at this fiddle: http://jsfiddle.net/EYfPe/2/ Why did you remove this answer as the correct one? Didn't it solve your problem? – VVV Oct 19 '12 at 12:38
  • it didn't solve my problem , their documentation says `Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false`. – Mirage Oct 22 '12 at 00:58
  • I think your on is working because ur using it like click without dynamically binding to new dom elements. I mean if u try something this `$('.mytable').on('click','a.edit', function(event) {` then it wont work – Mirage Oct 22 '12 at 01:57