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

Answer 1

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

Answer 2

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

Answer 3

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;
        }
    }
}