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>