使用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/

请帮我一个忙！

- Ansuman

---

我无法使用'on'，因为我正在使用较低版本的jQuery。 - Ansuman

升级您的 jQuery 版本。 - Deepu

顺便提一下，自 jQuery 1.7 版本起，.live() 方法已被弃用，请改用 .on() 方法！http://api.jquery.com/on/ - Enissay

即使您无法使用.on()，如果您使用的是>= 1.4.2，则可以并且应该使用.delegate()代替.live()。 - nnnnnn

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

- Okky

---

我不能使用'on'，因为我正在使用较低版本的jQuery。我甚至不能更新jQuery版本，因为这可能会破坏其他功能。 - Ansuman

我们可以创建一个名为“validate”的函数并完成这些操作吗？ - Ansuman

Answer 2

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

- Shirish Dhotre

Answer 3

尝试

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

演示：Fiddle

- Arun P Johny

---

新版本的jQuery中没有'live'，请使用'on'。 - Okky

@SreekeshOkky，它在版本1.6中，这是由OP使用的。 - Arun P Johny

我们能否创建一个名为“validate”的函数并执行相同的操作？ - Ansuman

使用$("#basicSearchFields input:text")。 - Roger Barreto

如果OP正在使用1.6，你应该修改你的代码使用.delegate()而不是.live()。 - War10ck

Answer 4

这里是另一个可能的解决方案 http://jsfiddle.net/TpExS/2/

注意：使用了JQuery 2.0.2

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

- Dart

Answer 5

简单易懂，当您点击添加更多元素时，会更新全局变量“toValidate”。

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

为什么？你设置验证时间时，它会在那一刻返回一个数组，你应该在每次有新元素时更新它，或者在live事件中检查所有元素。

- Roger Barreto