JQuery.live () not working

Question

My actual problem is that the .live () jQuery method is not working.

This is the code in which 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 snapshot is used on another page as follows:

<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 fragment, but when I load the page, the effects do not apply to the button / input tags ...

If I delete the .live method and use the “normal” method, the ui effects defined in the first segment are applied, but only the elements loaded before any AJAX request. Elements loaded after an ajax request are independent of the first fragment (although they have the same selector).

Thanks for the help.

Answer 1

, .live(), - , .live() docs:

DOM .live(). , .live() , .

.live() jQuery, DOM, .selector , , , .live, :

 jQuery.fn.sb_animateMenuItem = function() {
    $(this.selector).live(.....)

, .live()? , , , ( , )... $(DOMElement).live(), , ?

, , uuid, , , .bind(), , .live() .

---

:. , , , .live() .bind() , , .live() :

jQuery.fn.sb_animateMenuItem = function() {
  var mousehoverColor = '#0089F7';
  var duration = 250;
  var method = this.selector ? jQuery.fn.live : jQuery.fn.bind;
  method.apply(this, ['mouseover', function() {
     if(!jQuery.data(this, 'oColor'))
         jQuery.data(this, 'oColor', jQuery(this).css('background-color'));
     jQuery(this).stop(true).animate({ backgroundColor:mousehoverColor }, duration);
  }]);
  method.apply(this, ['mouseout', function() {
    jQuery(this).animate({ backgroundColor:jQuery.data(this, 'oColor') }, duration);
  }]);
  return this.css('cursor', 'pointer');
};

, .

Answer 2

.DELEGATE() .LIVE,.ON,.BIND

like

$("body").DELEGATE($(this),"click","myfunction")

$("body").DELEGATE($(this),"click",function () {
///code here
} )