0

私はこのコードを持っています

$('#addPhone').click(function() {
    phoneCount = $("#phoneTabs").tabs("length") + 1;
    $('#phoneTabs').show();
    $('#phoneTabs').append('<div id="phoneTabs' + phoneCount + '"><form id="phoneForm' + phoneCount + '" novalidate="novalidate" action="" method="post"><table><tr><td><b>Phone Number ' + phoneCount + '</b></td><td></td></tr><tr><td>Phone number</td><td><input type="text" class="required digits" maxlength="10" minlength="10"  name="phone_number' + phoneCount + '" /></td></tr><tr><td>Comment</td><td><textarea rows="5" cols="25" name="phone_comment' + phoneCount + '"></textarea></td></tr></table><br /><button id="addPhone' + phoneCount + '">Add</button></form></div>');

    $("#phoneForm" + phoneCount).validate({
        submitHandler: function() {
            return false;
        }
    });
    $('#addPhone' + phoneCount).button();
    $('#addPhone' + phoneCount).click(function() {
        $(this).button({
            disabled: true
        });
        $('#phoneForm' + phoneCount + ' input').attr('disabled', true);
    });

    $("#phoneTabs").tabs("add", "#phoneTabs" + phoneCount, phoneCount);
    $('#phoneTabs').tabs("select", phoneCount - 1);
    phoneCount++;
});​

addPhone ボタンをクリックすると、ボタンだけが無効になるのはなぜですか? #phoneForm'+ phoneCount の子である他の入力要素が無効にならないのはなぜですか?

私は何を間違っていますか？

4

2 に答える 2

1

これはクロージャーの問題です。クリック ハンドラーに適用される前にphoneCount値が変更されます。クロージャーを削除するには、これを試してください

$('#addPhone' + phoneCount).click((function(selector){ return function() {
    $(this).button({
        disabled: true
    });
    $(selector).attr('disabled', true);
}})('#phoneForm' + phoneCount + ' input'));

編集

関数での値を使用する場合は、その値phoneCountのみを IIFE に渡します。

$('#addPhone' + phoneCount).click((function(phoneCount){ return function() {
    if (phoneCount operator operand){
        code
    }
    $(this).button({
        disabled: true
    });
    $('#phoneForm' + phoneCount + ' input, other selectors').prop('disabled', true);
}})(phoneCount));
于 2012-07-16T21:20:17.210 に答える
0

行を変更すると、[最後]タブの入力が無効になる可能性があります

$(this).button({disabled : true});
$('#phoneForm'+ phoneCount+ ' input').attr('disabled',true);

することが

$(this).button({disabled : true});
$(this).closest("form[id^='phoneForm'])".filter('input').attr('disabled',true);

うまくいけば、アクティブなフォームを取得する必要があります。

于 2012-07-16T21:15:31.037 に答える