检测什么触发表单提交

Question

我正在尝试逐步修改他人的代码（机架式开源应用程序）.​​..也许我已经看了太久了。
但是我不知道为什么单击下面第4个单元格中的“编辑行”图像/按钮会触发表单提交。

HTML代码

          <tr>
             <td id=""><img src="?module=chrome&amp;uri=pix/tango-user-trash-16x16-gray.png" title="1 rack(s) here" height="16" width="16" border="0">
                  <form method="post" id="updateRow" name="updateRow" action="?module=redirect&amp;page=rackspace&amp;tab=editrows&amp;op=updateRow">
                     <input tabindex="1" name="row_id" value="26270" type="hidden">
                 </form>
              </td>
             <td><div id="location_name"></div></td>
             <td><div id="row_name">BLDG5:First Floor</div></td>
             <td>
                 <input tabindex="1" name="edit" class="edit" src="?module=chrome&amp;uri=pix/pencil-icon.png" id="" title="Edit row" type="image" border="0">&nbsp;
                 <input tabindex="1" style="display: none;" name="submit" class="icon" src="?module=chrome&amp;uri=pix/tango-document-save-16x16.png" title="Save changes" type="image" border="0"></td>
             <td><a href="index.php?page=row&amp;row_id=26270">Row BLDG5:First Floor</a></td>
          </tr>

我添加/创建了“编辑”按钮，以及一些用于处理“编辑单击”事件的jQuery代码。

jQuery代码

    //edit button handler   
    $(".edit").click(function(e){
            var location_id = this.id;
            var menu = $( "#location_id" ).clone();
            //locate the associated "location_name" field for the selected row & hide the column    
            var location_name=$(this).parent().siblings().children("#location_name").hide();
            var row_name = $(this).parent().siblings().children("#row_name").hide();
            //replace location_name with the new menu
            $(location_name).replaceWith(menu);
            menu.find('option').each(function(i, opt) {
                    // when the value is found, set the 'selected' attribute
                    if($(opt).attr('value') == location_id.toString()) $(opt).attr('selected', 'selected');
            });

            //change row name to input box for editing
            var input = $(document.createElement('input'));
            $(input).attr('type','text');
            //$(input).attr('name','edit_row_name');
            $(input).attr('value', $(row_name).text());

            //replace exiting row_name with this new input box. 
            $(row_name).replaceWith($(input));
            //show save button
            var save_btn = $(this).siblings(".icon").show();
    });

到目前为止我尝试过的

当我禁用/注释掉创建表单的PHP逻辑时，“编辑”按钮将按照我想要的方式工作。

我一直在夹文件夹结构，以查看是否有一些JavaScript嵌入了我看不到的地方。 但是，没有什么是对我的挑战。
我看不到/认识到的东西可能很简单。

有什么建议么？

Answer 1

看到：

<input type='image' />  

还有一个默认操作来提交表单，就像[type="submit"] 。 为了防止这种情况，您需要停止默认行为：

$(".edit").click(function(e){
    e.preventDefault(); // <----use this.