capture and bubbling events getting confused

Question

I wrote jquery code previously wich worked fine until now. Now suddenly it started to behave in strange way.

  $(document).ready(function(){
      $("#head").click(function(){
          $(this).next().toggle('slow');
      });

This code above is supposed to toggle the contents under the head bar. It was working fine. Now it slides down and then slides up on single click, which means it is getting fired twice, which in turn I suspect to be because of first capturing phase and then bubbling. So it gives this swing effect. So my question is this: is this possible to be fired in the way I suspect this to be? Bubble and Capture?

Edit

This problem started after I included this code

$('#inputsearch').keyup(function(event){

    var searchterms=$('#inputsearch').val();
    console.log(searchterms);
    $.ajax({
        type:'POST',
        data:{'searchterms': searchterms},
        url:'displaysearch.php',
        success: function(response){ 
        $("#searchingresults").empty().html(response).show();if(searchterms=='')
        {$('#searchingresults').empty().hide();}

        }
        });
        event.stopPropagation();
    });

    $('html').click(function(){  if(!$(event.target).is('#inputsearch')){
    $('#searchingresults').empty().hide();
}});

The html

<div align="left" id="head" style="margin:3px; margin-top:5px;">Contents    <span style="padding-right:70px; font-size:10px;">   7 </span></div>
 <div align="left" id="subbox" style="position: absolute; width: 100%; display: none;">
<ul><li><a href="/spiralblog/home.php">askbuddy</a></li>
<li><a href="/spiralblog/home.php">PHP</a></li>
<li><a href="/spiralblog/home.php">CSS</a></li></ul>
</div>

There is no capturing phase here. And it seems you are misinterpreting how event phases work http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing — A. Wolff, May 16 '15 at 15:01
@whatever But you have to provide in question itself minimalistic sample to replicate issue. BTW, to which element is referring `$(this).next()`? `#searchingresults`? — A. Wolff, May 16 '15 at 15:04
As a side note, you are nesting click binding inside keyup handler, which is a no go. On each keyup event, a new click event is bound, etc... — A. Wolff, May 16 '15 at 15:08
sorry I tried but its very difficult to produce `jsfiddle` for this... — whatever, May 16 '15 at 15:13
the event.stopPropagation(); is being called way after the whole event happens as well, Its tied to the callback on the ajax call.. You are not stopping any propagation/bubbling where it is. It should be moved out of the success function to be of any use. Actually its not even in that funciton... — Rolyataylor2, May 16 '15 at 15:14
In fact the click event isn't nested inside keyup event. I was confused because of bad code indentation in question. And your edit posting HTML markup doesn't help to spot from where comes from your issue, i'm sorry :( — A. Wolff, May 16 '15 at 15:21
:( Thanks for help anyway... looks like the problem is very deeply nested somewhere will have to rummage the whole day now.. Should I delete this question? — whatever, May 16 '15 at 15:24
So!!! here it goes... I had actually accidentally included the same `.js` file twice through the `include` directive. So removing the second reference fixed things... Thanksss!!! everybody — whatever, May 16 '15 at 16:21

score 0 · Answer 1 · answered May 16 '15 at 16:24

0

While including another page into the home page I accidentally included the same .js file twice. This was causing the same click event to be called twice. Which in turn was toggling the element twice in a single click. Hence the swing effect. :)

answered May 16 '15 at 16:24

whatever

332
2
16

capture and bubbling events getting confused

1 Answers1