Action .on('blur') doesn't work on input text - jQuery 1.9+

Question

I updated my application with a newest jQuery Version (1.9.1). According the release update, the .live() method was discontinued and removed from 1.9+ jQuery versions. The new resource is now the .on(), with the same syntax.

Early, I've wrote the jQuery code below:

jQuery("#addressTypes ul li input[type=text]").live('blur', function () {
    var item = {
        addressType: jQuery("#addressTypes ul input[type=text]").val(),
        idAddressType: jQuery("#addressTypes ul input[type=text]").parent().attr("id")
    }
    submitUpdateAddressType(item);
});

This code works on older versions, but stopped working with the jQuery update.

Can someone help me? Remembering that the item jQuery("#addressTypes ul li input[type=text]") cannot be changed due to business issues.

`.live` was replaced with `.on()` -- before upgrading, read the change log! — tymeJV, Nov 27 '13 at 21:08

score 9 · Accepted Answer · answered Nov 27 '13 at 21:13

9

jQuery(document).on('blur', "#addressTypes ul li input[type=text]", function () { });

answered Nov 27 '13 at 21:13

Thanh Trung

3,566
3
31
42

Thung My friend... You saved my skin! lol But... According Jason P, the .on() method expects three parameters, but this code was the only that didn't work. Other items worked fine with the change, for example: "jQuery("#addressTypes ul li").on('click', function (){}", where the old code was "jQuery("#addressTypes ul li").live('click', function (){}". Anyway, your suggestion worked fine for me. Tks! – Matheus Gelinski Nov 27 '13 at 21:20
@MatheusGelinski `live` is to attach an event to an element which existed or will exist (in the near future, if you load your content dynamically using AJAX or whatever). `jQuery("#addressTypes ul li").on('click', function (){}` works because it's the same as the old `.click`. When using 3 parameters, it's to use event delegation (in case of live). The event is actually bound to the parent (in this case `document`) then it will compare the source of the event `#addressTypes ul li input[type=text]` – Thanh Trung Nov 27 '13 at 21:26

Jason P · Answer 2 · 2013-11-27T21:20:41.717

3

In the case of static elements, you can simply replace the word live with on.

In the case of dynamically created elements, you instead need to use the version of on() that takes three parameters:

$(StaticContainer).on('event', 'selector', function() { });

See the section of the documentation about direct and delegated events.

Simplest solution would be this:

jQuery(document).on('blur', "#addressTypes ul li input[type=text]", function () {

Though it's generally best to find a static container as close to the target elements as possible (instead of document)

edited Nov 27 '13 at 21:20

answered Nov 27 '13 at 21:10

Jason P

26,984
3
31
45

could someone explain downvotes? – A. Wolff Nov 27 '13 at 21:12
Some trolls around here :) – Thanh Trung Nov 27 '13 at 21:13
This really depends on if the OP needs to delegate event binding or not. If so, then you're right. If not, then you're wrong. – j08691 Nov 27 '13 at 21:15
It's when you click the down arrow on an answer that isn't really answering the question. As a sidenote, I didn't downvote this one, but it wasn't much of an answer before the edits. – adeneo Nov 27 '13 at 21:15
1

@A.Wolff - Yes, where Jason P says "You can't simply change the word live to on" he's wrong. `.live()` was used for both dynamic and static elements, so in many cases you _can_ replace calls to live directly with on. – j08691 Nov 27 '13 at 21:17
@j08691 that makes more sense – A. Wolff Nov 27 '13 at 21:18
@j08691 Thanks for the insight. I had assumed since he said "The new resource is now the .on()" that he had tried that, and he was here because it didn't work. I suppose that may have been a poor assumption. – Jason P Nov 27 '13 at 21:21
1

I'm sure that Jason P meant that to use `.on()` for event delegation, you can't just change the method name. I don't know why anyone would use `.live()` if there weren't going to be dynamically generated elements. – Blue Skies Nov 27 '13 at 21:22
Sorry, but I need to say that you are wrong, @Jason P. All other items in the same file was wrote so, and all of them worked fine, except these that I asked. This: "jQuery("#addressTypes ul li").on('click', function () { }" is equal to several other parts that were applied, and worked with no problems. – Matheus Gelinski Nov 27 '13 at 21:25
@MatheusGelinski: You mean you were using `.live()` for elements that existed when the page loaded? Why would you do that? – Blue Skies Nov 27 '13 at 21:28
@Blue Skies Simple, the way I found to solve my problems in this case was putting all codes in the jQuery(document).ready(function (){ /*codes here*/});, and all events that runs in the page that has the .js file worked fine to me. – Matheus Gelinski Nov 27 '13 at 21:44
@JasonP Upvote for you because you edited your answer properly. – Matheus Gelinski Nov 27 '13 at 21:46
@MatheusGelinski: So you had `.live()` calls inside `$(document).ready()` to bind to elements that existed when the page loaded? – Blue Skies Nov 27 '13 at 22:30
@MatheusGelinski: Yeah, that's odd. Calls to `.live()` have no need to wait until the DOM is loaded. And if the elements were available when the page loads, and no others were to be added for the same selector, then `.live()` was the wrong approach in the first place. So Jason P wasn't so much wrong as he was making common sense assumptions. – Blue Skies Nov 29 '13 at 00:05
@BlueSkies yeah, I agree with you. The 'live' event theoretically is to run correctly outside .ready() event. But on practice, I only could do it inside this event. Very odd... – Matheus Gelinski Nov 30 '13 at 11:44

Action .on('blur') doesn't work on input text - jQuery 1.9+

2 Answers2