jQuery-删除模糊元素，但单击其子级

Question

I have following code:

$('#myEl').blur(function(){
  $(this).remove('.children');
});

But the children element have links inside, with another jQuery actions which doesn't trigger because the .children is removed on blur, which I guess is triggered before the click action. Simple example:

1. Children is visible and #myEl have focus
2. I click on the children link
3. #myEl loses his focus
4. Children element is removed
5. Children link action is not triggered, because I guess link is not present anymore

How to solve this? I was trying to delay remove:

$(this).delay(100).remove('.children');

With no luck.

Answer 1

If you are working with the delay way, you can't use jQuery .delay() since it only work on queued element (with animation).

You can use setTimeout :

$('#myEl').blur(function(){
  var $this = $(this);
  setTimeout(function(){
    $this.remove('.children');
  }, 100)
});

Answer 2

I've tried it with mousedown event and it worked fine. I don't thing adding a delay is always a good option.

   <input type="text" id="myEl"></input>
    <div class="children" >div child</div>
    <script>
        $('#myEl').blur(function(e){
            $('.children').remove();

        });

        $(".children").mousedown(function() {
            window.open('http://www.google.com')
        });
    </script>

And if you really want to add the click event for a specific reason then you can try this:-

       $('#myEl').blur(function(e){
            if(mousedown){
               window.open('http://www.google.com'); 
               mousedown = false;
            }
            $('.children').remove();

        });
        $('.children').click(function(e){
            window.open('http://www.google.com')
        });
        $(".children").mousedown(function() {
           mousedown = true
        });

Answer 3

what about simply making the child elements hidden after a click? Or maybe even having the child itself remove all children from its parent container after it has processed the click?

$('#myEl').blur(function(){ $(this).children('.children').hide(); }); $('.children').on("click",function(){ // perform your click-code actions here alert("I did it!"); // now remove your child elements from the parent $(this).parent().children('.children').remove(); });