javascript - Adding keyup events to dynamically generated elements using jquery -

i have button creates text boxes dynamically , there button 'clear'.

if there no text in of text field clear button disabled or else enabled. works text box created when dom loaded dynamically created textboxes not work.

here 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 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 me out!!

try this

$(document).on('keyup', "#basicsearchfields input[type='text']",function () {     console.log("hi");     var valid = false; //default 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); });