Question

我有一个包含许多行的表格，我希望在点击时用选择菜单替换单元格的内容。我想的是以下内容：

 $("#my-table tbody").on("click", "td.edit", function(){
    var $t=$(this),role=$t.text();
    $t.html($("#select-clone").clone(false).removeAttr('id'));
 }).on("change", "td.edit", function(){
    alert('change');
 }).on("blur", "td.edit", function(){
    alert('blur');
 });

上面的代码几乎可以使用，但由于某些原因，如果没有按下鼠标按钮，则会关闭选择菜单。

现在，当选择菜单失去焦点时，我希望触发一个事件，用原始文本替换选择菜单。我一直在玩blur（），但还没有让它工作。当选择菜单改变时，我希望触发一个事件，我可以保存数据并再次用选择的选项替换选择菜单。

Answer 1

1）

要解决您的第一个问题，您需要记住，您要将select附加到包含click事件的元素！因此，每当click select click时，您就会触发.edit上的mousedown ...浏览器只是四处走动，这就是为什么你被迫在选择过程中保持span。

要修复它，只需添加select并将点击绑定到范围，并将.edit附加到<tbody> <tr><td>xxx</td><td class="edit"><span>yyy</span></td></tr> <tr><td>xxx</td><td class="edit"><span>yyy</span></td></tr> <tr><td>xxx</td><td class="edit"><span>yyy</span></td></tr> </tbody>：

请参阅此working Fiddle示例！

相关HTML

$("#my-table td.edit").on("click", "span", function(){
  var $t    = $(this),
      $html = $t.parent(),
      role  = $t.text();

  $html.html($("#select-clone").clone(false).removeAttr('id'));
});

<强> JQUERY

.edit

2）

要将选定的选项文字放在change上，您只需将事件处理程序绑定到HTML，然后从选定的option收集$('.edit').on("change", "select", function() { var $t2 = $(this), val = $(this).find(':selected').html(); $t2.parent().html(val); }); ：

请参阅此working Fiddle示例！

<强>的jQuery

option

3）

要使步骤01 e 02循环，您需要将选定的span中的值包装到click中，以便在用户单击文本时触发$('.edit').on("change", "select", function() { var $t2 = $(this), $span = $('<span>'), val = $span.html($(this).find(':selected').html()); $t2.parent().html(val); });事件：

请参阅此working Fiddle示例！

<强>的jQuery

{{1}}

失去对选择菜单的焦点时触发事件

1 个答案:

1）

2）

3）