简体   繁体   中英

jquery .unbind and .bind not working

I need to bind and unbind the following, depending on what button is clicked. Here's what happens first:

<script type="text/javascript">
$(document).ready(function() {
    $('.xxMenu > li').bind('mouseover', openSubMenu);
[... etc.]
</script>

That makes some drop-down menus function. In the next script, if I put either of the following, they work fine to unbind the above and thus disable the menus when a search button is clicked:

 $('.xxMenu > li').unbind('mouseover');
 $('.xxMenu > li').unbind();

This, I notice by the way, doesn't work to unbind:

 $('.xxMenu > li').unbind('mouseover', openSubMenu);

Now, in the script after that, if I put any of the following they don't restore, ie re-bind, the first one (when someone clicks a button to cancel the search). Here's the whole script in this case:

  <script type="text/javascript">
    $(document).ready(function() {
     $('.closeSearch > img').bind('click', closeSearchBar);

    function closeSearchBar() {
        $('form.xxx').css('visibility', 'hidden');  
        $('.closeSearch > img').css('visibility', 'hidden');
        $('.searchIcon > img').css('visibility', 'visible');

          /* the ones that aren't working */
          $('.xxMenu > li').bind();
          /* or */
          $('.xxMenu > li').bind('mouseover');
          /* or */
          $('.xxMenu > li').bind('mouseover', openSubMenu);        
       };          
     });
   </script>

I'm wondering where the syntax or the logic is wrong, looking at this but haven't been able to figure it out.

UPDATE: Here's the whole thing on request. Sorry, I thought I was saving everyone some time by just posting the important parts. Fairly new at this.

<!-- 
Activate Drop Down Menus 
-->

<script type="text/javascript">
    $(document).ready(function() {
    $('.xxMenu > li').on('mouseover', openSubMenu);
    $('.xxMenu > li').on('mouseout', closeSubMenu);

    function openSubMenu() {
        $(this).find('ul').css('visibility', 'visible');    
    };

    function closeSubMenu() {
        $(this).find('ul').css('visibility', 'hidden'); 
    };

});
</script>


<!-- 
Open search field
-->

<script type="text/javascript">
$(document).ready(function() {
    $('.searchIcon > img').on('click', showSearch);

    function showSearch() {
        $('.search-macro .search-macro-query input').css('width', '533px');
        $('form.aui').css('visibility', 'visible'); 
        $('form.aui').css('z-index', '15');
        $('.closeSearch > img').css('visibility', 'visible');
        $('.search-macro-button').css('visibility', 'hidden');
        $('.searchIcon > img').css('visibility', 'hidden'); 

          /* disable the drop-down menus */
          $('.xxMenu > li').off('mouseover');

    };                         
});
</script>


<!-- 
Close search field when X button is clicked
-->

<script type="text/javascript">
$(document).ready(function() {
    $('.closeSearch > img').on('click', closeSearchBar);

    function closeSearchBar() {
        $('form.aui').css('visibility', 'hidden');  
        $('.closeSearch > img').css('visibility', 'hidden');
        $('.searchIcon > img').css('visibility', 'visible');
                    /* re-enable the drop-down menus if search is canceled */
        $('.xxMenu > li').on('mouseover', openSubMenu);
    };         
});
</script>


 <!-- 
 Show live search button when any search input typed in the field
 -->

 <script type="text/javascript">
 $(document).ready(function() {
 $('form.aui').on('keypress', changeImgs);

  function changeImgs() {
  $('.closeSearch > img').css('visibility', 'hidden');

  $('.aui-button').css({'z-index':'12', 'visibility':'visible', 'position':'relative', 'left':'292px', 'border':'0px','border-radius':'0px', 'background':'url(http://ops.confluence.uat.apg.services.gs.com:18090/download/attachments/38109760/searchPrompt.gif?version=5&modificationDate=1413553110523&api=v2) no-repeat'});

  $('input.text').css({'border':'0px'});

  /*   Hide the gray Confluence search submit button   */
  $('.searchbar > div > form > fieldset > button > span').css({'visibility':'hidden'})


 };
});

This answer from comments fixed it:

"just declare functions outside ready handler scope"

Just putting as an answer in case it's useful to others. A basic question I know, but still.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM