Question

如果用户点击“添加”，我需要暂时禁用所有添加/删除侦听器，直到myid失去焦点。

<!DOCTYPE HTML>
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
function OnLoad() {
    var myCounter = 0;
    $('.insert').live('click', function() {
        var currentRow = $(this).parents("tr:first");
        var newRow = currentRow.clone(true);
        newRow.children('td:last').empty().append('<input name="myid">');
        currentRow.after(newRow);
        document.myForm.myid.focus();
    });
    $('.delete').live('click', function() {
        if(confirm("Are you sure?")){
            $(this).parents("tr").remove();
        }
    });
}
google.load("jquery", "1");
google.setOnLoadCallback(OnLoad);
</script>
</head>
<body>
<form name="myForm">
<table border="1">
<tr>
<td class="insert">Add</td>
<td class="delete">Erase</td>
<td>Sample data goes here</td>
</tr>
</table>
</form>
</body>
</html>

换句话说，我不希望他们再点击“添加”，然后再点击“添加”。

Answer 1

您需要创建一个变量来跟踪是否允许用户点击Add。

单击“添加”时，将变量设置为false。

当文本框失去焦点时，请再次将其设置为true，如下所示：

$('input[name=myid').live('focusout', function() { canAdd = true; }));

然后，将if(!canAdd) return;添加到Add处理程序

的开头

Answer 2

您可能会发现在输入获得焦点时更容易设置变量，并在输入失去时将其清除。添加和删除的onClick函数应该检查是否设置了这个选择的变量，并根据它返回或继续。

或者，您可以使用按钮进行添加和删除，然后在输入接收和松散焦点时设置/清除添加/删除按钮的禁用属性。

Answer 3

var adding = false;
$('.insert').live('click', function() {
    if(!adding){
        // Do stuff
        adding = true;
    }
}

Answer 4

将每个事件处理程序的代码包装到自己的函数中：

function insertHandler() {
    var currentRow = $(this).parents("tr:first");
    var newRow = currentRow.clone(true);
    newRow.children('td:last').empty().append('<input name="myid">');
    currentRow.after(newRow);
    document.myForm.myid.focus();
}

在两个方法处理程序的开头，取消绑定click事件：

$('.insert').live('click', function() {
    $(this).unbind("click");
    insertHandler();
});

添加一个新的处理程序，使用focusout绑定到live事件（因为您的输入是以编程方式插入的），它将您的函数重新绑定到您的事件：

$("input[name=myid]").live("focusout", function() {
    $(".insert").live("click", insertHandler);
});

jQuery插入/删除网格

4 个答案: