Question

我试图通过并改变其他人的代码（racktables开源应用程序）......也许我已经看了太长时间了。
但我无法弄清楚为什么点击＆＃34;编辑行＆＃34;下面第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.

检测触发表单提交的内容

1 个答案: