Hello everyone. Please have a look at this:
http://jsbin.com/IfIVew/2/edit. This is a quick example that I made to illustrate what I need to do and the problem in doing so.
In a nutshell, I need to create graphical recursion. Specifically, I created a widget that is applied to a hidden field, which generates two possibilities for the user. One of such possibilities is the ability to add two more hidden fields which in turn allow the same two possibilities, thus creating what I'm calling the "graphical recursion". I need this to create a SQL WHERE clause editor. I'm not discussing the details here but hopefully this is good enough to understand my needs.
So back to the example. In here I have 2 "top level" div's. One of these has an internal div that is meant to behave exactly like its parent and the parent's sibling and therefore it becomes the target of the user-defined widget just as well. This works as you can see from the resulting page.
Now click the "Here" buttons and count the alerts you see per click. That's right! For top-level DIV's you see only one alert, which is the expected behavior, but for the inner DIV 2 alerts are fired!
So the big questions are:
- Why is it firing twice in nested widgets?
- How can I prevent multiple firings in nested widgets?
UPDATE: See
http://jsbin.com/IfIVew/3/edit, which is a revised version of the example. As you can see, the event is indeed fired in the context of each individual widget in the hierarchy, bottom to top. I added a 4th DIV as a 3rd-level child. The triggering doesn't seem to account for children of the item originally triggering, as expected (just wanted to really verify it, but the behavior was seen already clicking on #test1).