javascript - 内联样式不适用于动态创建的输入

Question

考虑:

  $( "#scanInDialogItems tr td:nth-child( 3 )").mouseenter( function() {
     var q = $( this ).html();
     $( this ).html( "<input type='number' style='text-align:right width:50px' min='1' value='" + q + "'/>" );
  }).mouseleave( function() { 
     var q = $( this ).find( "input" ).val();
     $( this ).html( q );
  });

每当用户将鼠标悬停在表格第三列中的单元格上时，内容就会替换为输入元素。就像一个魅力。

问题是没有正确应用此元素的内联样式。例如。例如，框中的文本左对齐 - 默认值。也没有设置宽度。

我在之前的一个问题中读到，动态创建的输入元素在创建时需要刷新:

Styles not getting applied properly in dynamically created radio buttons

所以我尝试添加这个:

     $( this ).find( "input" ).textinput( 'refresh' );

或者这个:

     $( this ).find( "input" ).textinput();

但这些都不起作用。我的目标平台是最新的 chrome。

我没有正确刷新输入吗？还是有其他问题？

Answer 1

在内联样式中，您错过了 text-align 和 width 之间的分号...

$( "#scanInDialogItems tr td:nth-child( 3 )").mouseenter( function() {
    var q = $( this ).html();
    $( this ).html( "<input type='number' style='text-align:right;width:50px' min='1' value='" + q + "'/>" );
}).mouseleave( function() { 
    var q = $( this ).find( "input" ).val();
    $( this ).html( q );
});

我刚刚在 jsfiddle 中尝试了一个之前和之后，这就是它的全部错误:)