jQuery .on() doesn`t work in namespaces instead of .live()

Question

Hello I'm trying to detect focusing the element using namespace. Here`s my working code:

(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);

My question is how to make it without using the .live()?

EDIT

To make it work I had to make an element as a function and now everything works fine. When I haven't it hasn't have the correct context. My new code:

(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);

[`this.element.focusout()`](https://api.jquery.com/focusout/) — Liam, May 24 '17 at 13:28
my preference is to use $.fn.functionName = function() {} - easier to manage (not a do it this way comment, but it could help you see where it's going wrong) — treyBake, May 24 '17 at 13:34

score 0 · Answer 1 · answered May 24 '17 at 13:31

Use

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

instead of

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

Please see the following code sample:

(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>

Vladu Ionut · Answer 2 · 2017-05-24T13:39:14.073

jQuery.live is deprecated start with 1.7 version , and after 1.9 live method has been removed. You can use instead 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>

cool - removed downvote and will remove comment :) – treyBake May 24 '17 at 13:38 — treyBake, May 24 '17 at 13:38

jQuery .on() doesn`t work in namespaces instead of .live()

2 Answers2