Question

我有这段代码

$('#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的孩子的其他输入元素没有被禁用？

我做错了什么？

Answer 1

这是closure issue，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));

Answer 2

如果更改行

，可能会禁用“最后”标签上的输入

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

是

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

应该有希望获得活跃的表格。

动态选择命名元素

2 个答案: