使用jquery将keyup事件添加到动态生成的元素

Question

我有一个动态创建文本框的按钮,还有另一个按钮'清除'.

如果任何文本字段中没有文本,则禁用清除按钮,否则将启用它.它适用于加载dom时创建的文本框,但对于动态创建的文本框,它不起作用.

这是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链接 - http://jsfiddle.net/TpExS/

请帮帮我!!

Answer 1

试试这个

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