我无法编辑和提交来自jquery的表单

Question

我有这个代码：

jQuery(function ($) {
    $('.over').mouseover(function(){
        $(this).html($('<form/>', {
            action: 'edit.php',
            method: 'POST'
        }).append($('<input/>', {
            type: 'text',
            name: 'name',
            value: $(this).text()
        })));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text over" id="1">TEXT</div>

因此，当鼠标结束时，输入会出现，但是为空，我无法编辑以发送表单。 有什么问题？

Answer 1

1. 您正在使用.html()替换所有内容，所以当您致电value: $(this).text()时，它已被表格替换。

2. 你似乎无法编辑它，因为每次用鼠标点击它都会重新触发事件。如果您 tab 到输入

，您可以编辑它

Answer 2

当你使用$(this).text()时，已经太晚了。元素HTML已经更改。

使用append:代替.append(，以便在$(this).text() 创建时抓取form！ 重要 ：另请注意.one()和mouseenter的使用（而不是鼠标悬停）

$('.over').one("mouseenter", function(){

  $(this).html(
    $('<form/>', {
      action: 'edit.php',
      method: 'POST',
      append: $('<input/>', {
        type: 'text',
        name: 'name',
        value: $(this).text()
      })
    })
  );
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text over" id="1">TEXT</div>

... BTW