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>