Question

好的：我有一个像这样的动态表单：

<div id="container">
<div id="autosuggest">...</div>
<form action="" method="post" id="inputForm">
    <table>
        <thead>
            <tr>
                <th>amount</th>
                <th>name</th>
                <th>discount</th>
                <th>vat</th>
                <th>price</th>
                <th>comment</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr id="row1">
                <td><input type="text" name="amountRow1" id="amountRow1" value=""/></td>
                <td>Product name 1 </td>
                <td><input type="text" name="discountRow1" id="discountRow1" value=""/></td>
                <td>
                    <select id="vatRow1" name="vatRow1">
                        <option value="10">10%</option>
                        <option value="20">20%</option>
                        <option value="30">30%</option>
                    </select>
                </td>
                <td><input type="text" name="priceRow1" id="priceRow1" value=""/></td>
                <td><input type="text" name="commentRow1" id="commentRow1" value=""/></td>
                <td><button class="trashButton"></button>
            </tr>
            <tr id="row2">
                <td><input type="text" name="amountRow2" id="amountRow2" value=""/></td>
                <td>Product name 2 </td>
                <td><input type="text" name="discountRow2" id="discountRow2" value=""/></td>
                <td>
                    <select id="vatRow2" name="vatRow2">
                        <option value="10">10%</option>
                        <option value="20">20%</option>
                        <option value="30">30%</option>
                    </select>
                </td>
                <td><input type="text" name="priceRow2" id="priceRow2" value=""/></td>
                <td><input type="text" name="commentRow2" id="commentRow2" value=""/></td>
                <td><button class="trashButton"></button>
            </tr>
        </tbody>
    </table>
    <input type="submit" id="submitForm" name="submitForm" value="submit">
</form>

要澄清的一些事情：

每一行都有一个唯一的时间戳，在本例中简化为row1，row2等......
容器div实际上是一个放在jquery-ui-dialog
autosuggest div还有一些其他内容需要简单的自动提示
使用autosuggest动态添加每一行，使用时间戳保持每一行唯一
每行都有一个class ='trashButton'的按钮，这是一个jquery-ui按钮，按钮的明显目的是从表中删除行。
由于表单是使用ajaxcall

按钮事件处理程序：


$(document).ready(function(){
    $(".trashButton").live('click', function(){
        removeProduct(this);
        return false
    });
})

现在问题如下：

当我的光标位于表格的任何输入字段中时，我按下回车按钮。第一行从表中删除。无论焦点/光标在哪里，它总是被移除的第一行事实是，按下回车键不应删除任何行。相反，如果发生任何事情，表格应该尝试提交另一方面，当我的光标/焦点在autosuggest输入字段中并按下回车：没有任何反应，这正是我想要的。当我点击'trashButton'时，正确的行会被删除：它也应该如何工作。

我调试了所有我能想到的可能导致autosuggest插件或错误结束标签或任何简单相似的问题（我的意思是，我调试了我能想到的最明显的事情）。

所以简而言之：我根本不知道为什么我的removeProduct（）得到了触发，或者更糟糕的是，让它一直删除第一行而不是实际聚焦的行（这会更有意义）。当我按下回车键时，我不确定如何捕获触发的事件处理程序，所以我不知道如何调试它。

非常感谢所有帮助或建议，

干杯，

Bodybag

编辑：

@Ed Fryed：感谢你能这么快回复。问题解决了！将按钮更改为锚，使enterpress触发formubmit。使用preventDefault（）取消了表单提交。但现在我使用以下方法取消了每个表单的提交功能：

$("#inputForm").keypress(function(event){
   if(event.which===13){
       event.preventDefault();
    }
})

如果我有更多的代表xD，则会获得投票对新问题的帮助会更加可爱，

欢呼体袋

Answer 1

我可能错了，但在处理表单时按下回车按钮会触发表单中的第一个按钮。在您的情况下遇到的第一个按钮是第一行的垃圾按钮。

两个选项。

首先（和我选择的那个）

将垃圾按钮设为div或链接或其他元素。因为他们实际上不需要按钮。

秒。如果他们真的必须是按钮，那么你将必须检测输入被按下并停止其默认值。

Answer 2

您使用的是IE吗？在IE中，表单提交工作有点不同。我想按下回车键时会找到第一个按钮并单击它。

尝试在表单上指定一个操作，也许它会正确地选择输入类型=“提交”而不是按钮。
使用链接删除行，而不是按钮。更容易与表单事件分开。
一般来说，要调试这些东西，只需挂钩表单提交和其他相关事件。然后启动任何javascript调试器（firebug，chrome的内置等）并在事件处理程序上放置断点。

编辑:(对于新问题）

$("#inputForm").submit(function(event){
   if(event.which===13 && $(event.target).attr('id') != "submitForm"){
       event.preventDefault();
   }
})

对不起，我没有对此进行测试，但希望它会给你一个正确方向的暗示。

表单提交/ Jquery事件问题

2 个答案: