live() not working with change function

Question

Hi friend following is my code

SCRIPT

$(document).ready(function(e) {
    $('.text').live('change',function(){
        var a = $(this).val();
        alert(a);
        })
});

HTML

<input name="" type="text" class="text"/>

I am new on jQuery i want to fetch input's value on change The value is dynamicly change again and again

Please help me guys

Which version of JQuery are you using ? `.live()` - **version deprecated: 1.7, removed: 1.9**. — Vucko, Aug 23 '13 at 06:01
It should work for **1.7.2**, [JSFiddle](http://jsfiddle.net/5hqu8/). — Vucko, Aug 23 '13 at 06:04
okay ... As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live(). — Anand, Aug 23 '13 at 06:07

score 11 · Accepted Answer · answered Aug 23 '13 at 06:02

11

As of jQuery 1.7, the .live() method is deprecated.

You should use on()

$(document).ready(function(e) {
    $('.text').on('change',function(){
        var a = $(this).val();
        alert(a);
        });
});

answered Aug 23 '13 at 06:02

Nikolaj Zander

1,270
9
13

score 2 · Answer 2 · edited May 23 '17 at 11:44

2

For textbox, use input instead of change

$('.text').live('input',function(){
        var a = $(this).val();
        alert(a);
        })
});

Check this SO answer about On input change event.

BTW: You should think of moving to latest version of jQuery and replace .live() with .on()

edited May 23 '17 at 11:44

Community

1
1

answered Aug 23 '13 at 06:04

Praveen

55,303
33
133
164

score 1 · Answer 3 · answered Aug 23 '13 at 06:06

The .live() method has been deprecated since jQuery 1.7 and has been removed in 1.9. We recommend upgrading code to use the .on() method instead.jQuery Core 1.9 Upgrade Guide

$(document).ready(function(e) {
    $('.text').on('change',function(){
        var a = $(this).val();
        alert(a);
        })
});

score 0 · Answer 4 · answered Aug 19 '16 at 04:47

0

You can use on or click

$(document).ready(function(e) {
    $('.text').click('change',function(){
        var a = $(this).val();
        alert(a);
        })
});

answered Aug 19 '16 at 04:47

Elyor

5,396
8
48
76

score 0 · Answer 5 · answered Nov 08 '19 at 09:51

{Function: "ON()"} {Event: "input"} {Works with ALL Form fields and HTML5 "contenteditable"}

As other user pointed out the live() function is long depreciated, however I would like to point out the true way of using on() function to get the same effect as live() and help StackOverflow users to get a better grasp of the event with a misleading name "input" jQuery documentation

The difference is that the live() would target all elements of sort, whilst on() / bind (), targeting current affected element only, which makes it much more efficient, light and fast.

The right solution, however is not just on() or bind() as others are pointing out. Just using on() event will "bubble up" and will not fire until you focus away from the element. The trick is in using "input" as a shorthand event, whilst targeting the element right after it. The good news is that same "input" event works not just on all form fields, but also on html "contenteditable" content too ;)

Full example is in the snippet below.

jQuery(document).ready(function(e) {
    $('body').on('input','.text',function(){
        var a = $(this).val();
        alert(a);
    });
});

.text{
   display:block;
   width:50%;
   height:25px;
   margin:0;
   border:1px soid silver;
   background:silver;
   line-height:25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input name="" type="text" class="text" placeholder="Type e.g. 123"/>
<hr>
<select name="select" class="text">
   <option>1</option>
   <option>2</option>
</select>
<hr>
<textarea class="text"  placeholder="Type e.g. 123"></textarea>
<hr>
<div contenteditable="true" class="text">Type e.g. 123</div>

live() not working with change function

5 Answers5

Linked