6

テキストボックスを動的に作成するボタンがあり、別のボタン「クリア」があります。

どのテキスト フィールドにもテキストがない場合、クリア ボタンは無効になるか、または有効になります。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/

私を助けてください！！

4

5 に答える 5

1 
$(document).on('keyup', "input#basicSearchFields",function () {  
    // do something here
}
于 2014-04-01T08:48:27.217 に答える
1

シンプルで、クリックで要素を追加すると、グローバルな「toValidate」変数を更新します。

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

なんで？toValidate を設定すると、その時点で配列が返されます。新しい要素があるたびに配列を更新するか、ライブ イベント内ですべてをチェックする必要があります。

于 2013-08-28T13:31:35.460 に答える
1

試す

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

デモ:フィドル

于 2013-08-28T11:54:27.120 に答える