jQuery .live() not working.
- by Silvio Iannone
Hi there,
my actual problem is that .live() jQuery method is not working.
This si the code where i use it:
jQuery.fn.sb_animateMenuItem = function()
{
var mousehoverColor = '#0089F7';
var duration = 250;
return this.each(function()
{
var originalColor = $(this).css('background-color');
$(this).live('mouseover', function()
{
this.style.cursor = 'pointer';
$(this).animate().stop();
$(this).animate(
{
backgroundColor: mousehoverColor
}, duration);
});
$(this).live('mouseout', function()
{
this.style.cursor = 'default';
$(this).animate(
{
backgroundColor: originalColor
}, duration);
});
});
};
This snipped is used i another page in this way:
<script type="text/javascript" src="ui/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="ui/js/jquery-ui-1.8.1.custom.min.js"></script>
<script type="text/javascript" src="ui/js/color.js"></script>
<script type="text/javascript" src="engine/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="ui/js/ui.js"></script>
<script type="text/javascript">
// UI effects
$(document).ready(function()
{
$('button').sb_animateButton();
$('input').sb_animateInput();
$('.top_menu_item').sb_animateMenuItem();
$('.top_menu_item_right').sb_animateMenuItem();
$('.left_menu_item').sb_animateMenuItem();
});
</script>
Since my site uses AJAX requests i used the .live method in the first snippet, but when i load the page the effects are not applied the the button/input... tags.
If i remove the .live method and use the 'normal' way, ui effects defined in the first snipped are applied but only the the elements loaded before any AJAX request. The elements loaded after the ajax request are not affected by first snippet (though they have the same selector).
Thanks for helping.
