Adding keyup events to dynamically generated elements using jquery

Question

I have a button which creates text boxes dynamically and there is another button 'Clear'.

If there is no text in any of the text field then the clear button is disabled or else it will be enabled. It works for the text box that is created when the dom is loaded but for the dynamically created textboxes it does not work.

Here is the HTML

<input type="button" value="Click Me" class="a" />
<input type="button" value="Clear" class="a" id="clearBasicSearch" />
<div id="basicSearchFields">
    <input type="text" />
</div>

Javascript

$(".a").click(function () {
    $("#basicSearchFields").append("<input type='text' class='b' />");
});

/*$(".b").live("keyup", function () {
        //alert('you pressed ' + $(this).val());
        $(this).val($(this).val().toUpperCase());
        });*/

var toValidate = $("#basicSearchFields input[type='text']");
$("#clearBasicSearch").removeClass('hidden').removeClass('button').attr('disabled', true);

toValidate.live('keyup', function () {
    console.log("hi");
    var valid = false; //default is false
    toValidate.each(function () {
        if ($(this).val().length > 0) {
            valid = true; //non-empty element found
            return false; //break
        }
    });
    $("#clearBasicSearch").attr('disabled', !valid).toggleClass('button', valid);
});

JSfiddle link - http://jsfiddle.net/TpExS/

Please help me out!!

BTW, as of jQuery 1.7, the .live() method is deprecated. Use .on() instead ! api.jquery.com/on — Enissay
– Enissay, Commented Aug 28, 2013 at 11:57
Even if you can't use .on(), if you're using >= 1.4.2 you can and should use .delegate() instead of .live(). — nnnnnn
– nnnnnn, Commented Aug 28, 2013 at 12:09

Okky · Accepted Answer · 2013-08-28 12:14:53Z

20

Try this

$(document).on('keyup', "#basicSearchFields input[type='text']",function () {
    console.log("hi");
    var valid = false; //default is false
    var toValidate = $("#basicSearchFields input[type='text']");
    toValidate.each(function () {
        if ($(this).val().length > 0) {
            valid = true; //non-empty element found
            return false; //break
        }
    });
    $("#clearBasicSearch").attr('disabled', !valid).toggleClass('button', valid);
});

answered Aug 28, 2013 at 12:14

Okky

10.5k16 gold badges78 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ansuman Over a year ago

I can't use 'on' as I am using a lower jquery version. I even can't update the jquery version as it might break other functionality.

Ansuman Over a year ago

Also can we create a function called 'validate' and do the stuff?

Shirish Dhotre · Accepted Answer · 2014-04-01 08:48:27Z

2

$(document).on('keyup', "input#basicSearchFields",function () {  
    // do something here
}

answered Apr 1, 2014 at 8:48

Shirish Dhotre

1431 silver badge5 bronze badges

Comments

Dart · Accepted Answer · 2013-08-28 13:30:55Z

Here is another possible solution http://jsfiddle.net/TpExS/2/

Note: JQuery 2.0.2 used

Javascript

$(document).ready(function(){
    var fields = $('input[class=b]');
    for(var i = 0; i < fields.length; i++){
        $(fields[i]).on('keyup', validateFields);
    }
});

$(".a").click(function () {
    var newField = $('<input/>').attr('type', 'text').attr('class', 'b');
    $(newField).on('keyup', validateFields);

    $("#basicSearchFields").append(newField);
});

function validateFields(){
    if($(this).val().length){
        $('#clearBasicSearch').attr('disabled', false);
        return;
    }

    $('#clearBasicSearch').attr('disabled', true);
    var fields = $('input[class=b]');
    for(var i = 0; i < fields.length; i++){
        if($(fields[i]).val().length){
            $('#clearBasicSearch').attr('disabled', false);
            return;
        }
    }
}

Arun P Johny · Accepted Answer · 2013-08-28 13:33:19Z

1

Try

$("#basicSearchFields").delegate("input[type='text']", 'keyup', function () {
    validate();
});

function validate(){
    console.log("hi");
    var valid = false; //default is false
    var toValidate = $("#basicSearchFields input[type='text']");
    toValidate.each(function () {
        if ($(this).val().length > 0) {
            valid = true; //non-empty element found
            return false; //break
        }
    });
    $("#clearBasicSearch").attr('disabled', !valid).toggleClass('button', valid);
}

Demo: Fiddle

edited Aug 28, 2013 at 13:33

answered Aug 28, 2013 at 11:54

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

5 Comments

Okky Over a year ago

there is no 'live' in new jQuery versions try 'on'

Arun P Johny Over a year ago

@SreekeshOkky it is there in version 1.6 which is used by OP

Ansuman Over a year ago

Can we create a function as validate and do the same stuff?

Roger Barreto Over a year ago

use $("#basicSearchFields input:text")

War10ck Over a year ago

If the OP is using 1.6 you should modify your code to use .delegate() rather than .live().

Roger Barreto · Accepted Answer · 2013-08-28 13:38:49Z

1

Simple, Updates your global "toValidate" variable when you add more elementson the click.

$(".a").click(function () {
    $("#basicSearchFields").append("<input type='text' class='b' />");
    toValidate = $("#basicSearchFields input:text");
});

Why? The time you set toValidate, it will return an array at that moment, you should updates it in each time there are new elements, or check for all of then inside the live event.

edited Aug 28, 2013 at 13:38

answered Aug 28, 2013 at 13:31

Roger Barreto

2,2841 gold badge19 silver badges24 bronze badges

Collectives™ on Stack Overflow

Adding keyup events to dynamically generated elements using jquery

5 Answers 5

2 Comments

Comments

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related