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.