0

jQuery で奇妙な動作に遭遇しました。何が間違っているのか知りたいです。

私はそれを回避することができましたが、私はそれで何日も髪を引っ張っていました.

ここにjsFiddleがあります... http://jsfiddle.net/YZxzy/3/

問題は を に置き換えているよう<tr>です<input ... /> <tr> .. <tr>。ただし、これは正しくレンダリングされます。

明確にするために、以下を持っています：

<table>
  <thead>
    <tr>
      <th>col 1</th>
      <th>col 2</th>
    </tr>
  </thead>
  <tbody>
    <input type="hidden" .... />
    <tr>
    ...
    </tr>
  </tbody>
</table>

ブラウザで正しく表示されますが、jQuery の「replaceWith」アクションを使用してこれを作成することはできません。

さて、これは適切に形成されておらず、悪い習慣であることはわかっています。問題は、どのように修正するかではありません。を に追加することで修正できることを<input>知っています。質問は：

.replaceWith()ブラウザでは正しくレンダリングされるにもかかわらず、jQuery で上記のことができないのはなぜですか?

4

1 に答える 1

1

実は、このスクリプトにはいくつか問題があります。

ここに私のフォークがあります：http://jsfiddle.net/mori57/b3wfY/

1 つには、これが大きくなり始めると、既に存在するものを再追加するためだけに DOM を破壊しているため、混乱に陥り始めるでしょう。再追加するためだけに AddNewRows を置き換える正当な理由はありません。代わりに、.before() を使用して新しい行を挿入する必要があります。

$("#AddRows").click(function () {
    $("#AddNewRows").before(
        '<tr id="row3"><input type="hidden" value="33" id="hiddenRow3" /><td>Value 3.1</td><td>Value 3.2</td></tr>');
});

次に、隠しフィールドを行内に移動するとすぐに、機能し始めました。なんで？<input/>タグは配置した場所では有効ではないため...<table/>タグには tbody、thead、tr、およびその他のいくつかのタグを含めることができますが、入力は無効です。これはレンダリングをオフにしていました。ただし、非表示の入力フィールドを行内に配置する場合、それは有効な配置です...実際には、td タグ内に配置する方がよいと思いますが、tr 内に配置するとすぐに機能し始めました。

于 2013-02-04T20:08:06.900 に答える