jQuery .on（）在命名空间中不起作用，而不是在.live（）中起作用

Question

你好，我试图检测使用命名空间来聚焦元素。这是我的工作代码：

(function($){ 
    searchBox = { 
     element: $('div#block-search-form input[name=search_block_form]'), 
     focus: function(){ 
      this.element.live('focusin',function(){ 
       console.log('in'); 
      }); 

      this.element.live('focusout', function(){ 
       console.log('out'); 
      }); 
     } 
    } 

    $(document).ready(function(){ 
     searchBox.focus(); 
    }); 
})(jQuery); 

我的问题是如何使它不使用.live（）？

编辑

为了使它工作，我不得不作出一个元素的功能，现在一切工作正常。当我没有时，它没有正确的上下文。 我的新代码：

(function($){ 
    searchBox = { 
     element: function(){return $('div#block-search-form input[name=search_block_form]')}, 
     init: function(){ 
      this.focus(); 
     }, 
     focus: function(){ 
      var that = this; 

      that.element().on({ 
       'focusin': function(){ 
        /*code*/ 
       }, 
       'focusout': function(){ 
        /*code*/ 
       } 
      }); 
     } 
    } 

    $(document).ready(function(){ 
     searchBox.init(); 
    }); 
})(jQuery); 

Answer 1

使用

$(document).on("event", "element", function() { 

，而不是

this.element.live('focusin',function(){ 

请参阅下面的代码示例：

(function($){ 
 
    searchBox = { 
 
     element: $('div#block-search-form input[name=search_block_form]'), 
 
     focus: function(){ 
 
      $(document).on("focusin", this.element, function() { 
 
       console.log('in'); 
 
      }); 
 

 
      $(document).on("focusout", this.element, function() { 
 
       console.log('out'); 
 
      }); 
 
     } 
 
    } 
 

 
    $(document).ready(function(){ 
 
     searchBox.focus(); 
 
    }); 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="block-search-form"> 
 
    <input name="search_block_form" /> 
 
    
 
</div>

Answer 2

jQuery.live已被弃用从1.7版本开始，1.9版本的live方法已被删除。 可以使用代替jQuery.on

(function($){ 
 
    searchBox = { 
 
     element: $('div#block-search-form input[name="search_block_form"]'), 
 
     focus: function(){ 
 
      this.element.on("focusin", function() { 
 
       console.log('in'); 
 
      }); 
 

 
      this.element.on("focusout", function() { 
 
       console.log('out'); 
 
      }); 
 
     } 
 
    } 
 

 
    $(document).ready(function(){ 
 
     searchBox.focus(); 
 
    }); 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> 
 
<div id="block-search-form"> 
 
    <input name="search_block_form" /> 
 
    
 
</div>