jQuery e.stopPropagation() - comment utiliser sans rompre la fonctionnalité de dropbox?

Question

Petite histoire: stopPropagation() empêche la fermeture d'un menu déroulant - ce qui est bien. Mais cela empêche également l'ouverture de la boîte de dépôt la prochaine fois - ce qui est mauvais.

longue histoire: J'utilise Twitter-Bootstrap et j'ai mis une boîte de recherche dans le menu déroulant comme ceci:

<div id="search_word_menu" style="position:absolute;right:157px;top:60px;"> 
     <ul class="nav nav-pills"> 
      <li class="dropdown" id="menu200"> 
       <a class="dropdown-toggle btn-inverse" data-toggle="dropdown" style="width:117px;position:relative;left:2px" href="#menu200"> 
       <i class="icon-th-list icon-white"></i> 
        Testing 
        <b class="caret"></b> 
       </a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Retweets</a></li> 
        <li><a href="#">Favourites</a></li> 
        <li class="divider"></li> 
        <li><a href="#">A list</a></li> 
        <li class="divider"></li> 
        <li><a href="#">A saved search</a></li> 
        <li><a href="#">A saved #hashtag</a></li> 
        <li class="divider"></li> 
        <li> 
<!-- HERE -->  <input id="drop_search" type="text" class="search_box_in_menu" value="Search..."> 

        </li> 
       </ul> 
      </li> 
     </ul> 

Lorsque je clique dans le champ de recherche, le comportement par défaut est évidemment de fermer la liste déroulante - mais cela rend difficile l'écriture dans un terme de recherche. J'ai donc essayé avec e.stopPropagation(), qui empêche effectivement la fermeture de la liste déroulante. Ensuite, lorsque j'appuie sur Entrée dans la boîte de recherche, je ferme la liste déroulante avec un .toggle() - semble également fonctionner correctement.

Le PROBLÈME se pose quand je veux à tout cela encore, parce que le e.stopPropagation() a maintenant désactivé la liste déroulante tout à fait - ie. quand j'appuie sur le menu déroulant, il ne s'ouvre plus! C'est à cause de stopPropagation(), sans aucun doute - mais comment puis-je résoudre ce problème, afin que j'obtienne la fonctionnalité susmentionnée, mais sans casser le reste?

jQuery ci-dessous:

$(document).ready(function() { 
    console.log("document.ready - "); 

       //clearing search box on click 
    $(".search_box_in_menu").click(function(e) { 
     e.stopPropagation(); // works for the specific task 
     console.log(".search_box_in_menu - click."); 
     if($(this).val() == 'Search...') { 
      $(this).val(''); 
      console.log(".search_box_in_menu - value removed."); 

     }; 
     //return false; //this is e.preventDefault() and e.stopPropagation() 


    }); 

        // when pressing enter key in search box 
    $('.search_box_in_menu').keypress(function(e) { 
     var keycode = (e.keyCode ? e.keyCode : e.which); 
     if(keycode == '13') { 
      console.log(".search_box_in_menu - enter-key pressed."); 
      console.log($(this).val()); 
      $(this).closest('.dropdown-menu').toggle(); //works 

     } 
    }); 


    $('.dropdown').click(function() { 
     console.log(".dropdown - click."); 
     $(this).closest('.dropdown-toggle').toggle(); //does nothing 
    }); 

vous serions reconnaissants de l'aide! Je commence à soupçonner que cela pourrait être un problème amorcé seulement, ou du moins causé par leur mise en œuvre - mais c'est au-delà de moi atm.

Answer 1

J'ai trouvé une solution: en utilisant stopPropagation(), et en fermant la boîte avec un déclencheur manuel. Ensuite, pour une raison quelconque (le stopPropagation() est-il réinitialisé?), Cela fonctionne.

//dealing with the dropdown box 
$(document).ready(function() { 
    console.log("document.ready - "); 

    //clearing search box on click and prevent the dropdown from closing 
    $(".search_box_in_menu").click(function(e) { 
     e.stopPropagation(); 
     console.log(".search_box_in_menu - click."); 
     if($(this).val() == 'Search...') { 
      $(this).val(''); 
      console.log(".search_box_in_menu - value removed."); 
     }; 
     //return false;   

    }); 

    // when pressing enter key in search box 
    $('.search_box_in_menu').keypress(function(e) { 
     var keycode = (e.keyCode ? e.keyCode : e.which); 
     if(keycode == '13') { 
      console.log(".search_box_in_menu - enter-key pressed."); 
      console.log($(this).val()); 
      $(this).closest('.dropdown').trigger('click'); 
     } 
    }); 

    //resetting a dirty search box 
    $('.dropdown').click(function() { 
     if ($(this).closest('.search_box_in_menu').val() == 'Search...') { 
      console.log(".search_box_in_menu - clean searchbox."); 
     } 
     console.log(".dropdown - click."); 
    });  
});