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

Answer 2

尝试

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

Answer 3

这是另一种可能的解决方案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;
        }
    }
}

Answer 4

简单，在点击时添加更多元素时更新全局“toValidate”变量。

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

为什么呢？你设置为Valeidate的时间，它将在那一刻返回一个数组，你应该在每次有新元素时更新它，或者在实时事件中检查所有内容。

Answer 5

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

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

5 个答案: