-3

I have a method to dynamically add a container which is attached to the target container . When the action has been performed i removed the action container but now I have to add a class to parent container but problem is it is getting set (class name to parent container ) but it gets removed itself. For more clarification I am adding an sample code

<div class="main">
  <ul>
    <li>some contents</li>
    ................
    ................
  </ul>
  <ul class="dynamic_container">
   <li>actions</li>
   ................
  </ul>
</div>

dynamic_container is added when user mouseover the main class container and this get removed once action has been executed . But now it gets added(class name) but it gets removed too . I believe this is basically because $(e.target) get removed ....

Any advice/suggestion will be appreciated . Thanks in advance.

edit :

$(e.target).parents('.main').addClass('current'); (this code does not able to add class to .main div) . This code is executed from ul.dynamic_container (which is added to the dom on mouseover on div.main)

edit 2: jsfiddle link: this is the structure (not the actual code)

http://jsfiddle.net/CASy6/

4

1 回答 1

1

Thanks for posting the fiddle. Now we can identify some problems that are preventing it from working.

The first problem is that when you try to move the mouse over the buttons, they disappear. If you add some console.log statements to the mouseover and mouseout handler functions, you will see that they get called way too much. This is due to the way these events work in a situation with nested elements.

jQuery provides a good solution to this problem: the mouseenter and mouseleave events. Read about them in the API docs, specifically the section describing the difference between mouseover and mouseenter.

See this fix implemented in this version of the jsFiddle: http://jsfiddle.net/CASy6/1/. With this, you can now actually click on the buttons, and also, a whole bunch of unnecessary .append() and .remove() calls are avoided.

The next problem is that no handler is called when you click a button.

The reason for this is that you set up the handlers by calling e.g.

$('li.first').on('click', function(e){ ... });

when the page loads, but at that moment, the selector li.first matches nothing, because you haven't appended the buttons to one of the divs yet. So handlers are only attached at page load, and they have nothing to attach to.

One solution for this problem is to use delegated events (see docs). This means we attach a handler to a container element (which is always present, including at page load), and handle events that bubble up from a descendant element.

In this case, we can attach a delegated event handler to the .main divs, which handles a click coming from one of the buttons:

$('div.main').on('click', 'button.first', function(e){
    $(this).closest('.main').addClass('current');
    alert('first action');
});

The second argument button.first is a selector which determines which descendant events will be handled by this handler. (I fixed the appended html so the class attribute is attached to the button element instead of the li element; it was inconsistent between the two buttons.)

See these fixes in action here: http://jsfiddle.net/CASy6/2/

于 2013-03-31T20:01:16.240 回答