2

データ行を含む html テーブルがあります。AJAX を使用して、テーブルへの追加/編集/削除機能を構築しています。

私のテーブル行の形式は次のとおりです。

<tr id="281"><td class="todo-task">fdgdg</td><td>some more data</td><td>EDIT BUTTON</td></tr>

現時点では、新しい行を追加し、prepend().

テーブルの行を編集するには、編集ボタンをクリックして値をフォームに取り込み、送信します ... ここまでは単純です。編集クリックとフォーム マークアップのコードは次のとおりです。編集クリックの ID がフォームの非表示フィールドに入ることに注意してください。

$("button.edit-todo").bind("click", function(){
var task = $(this).closest('tr').children('td.todo-task').text();
var todoID = $(this).closest('tr').attr("id");

$("div#todo-form input.todo-task").val(task);
$("div#todo-form input.key").val(todoID);
});

...

<form id="mgnt-edit-todo-form" class="record-edit-form">
 <input type="text" class="todo-task input" name="task">
 <input class="key" name="key" type="hidden" value="279">
 <button class="update uk-button uk-modal-close" type="submit">Save</button>
</form>

...そして、更新のために隠しフィールドをバインドするajaxビット。

$("button.update").bind("click", function(e){
var key = $(this).closest('.key').attr('value');
$.ajax({
  type: "POST",
  url: "update-record.php",
//etc etc etc

問題

最初の更新は正常に機能し、id を含むテーブル行が先頭に追加されます。この問題は、同じ「先頭に追加された」行をさらに更新したいときに発生します。DOM はマークアップを正しいものとして表示しますが、関数button.edit-todoは ID を取得しなくなります。DOM でフォーム マークアップを見ると、非表示フィールドの値が空白になっています。

Chrome でソースを見たところ、ブラウザ/DOM のビューと一致していないことがわかりました。たとえば、マークアップはすべて同じですが、行の順序が異なっており、日付順のように見えます。（日付フィールドがありますが、この例ではフィールドを切り詰めました..）これが問題の原因だと思います...質問はなぜですか？どうすれば修正できますか？

ありがとう

アップデート

これがDOMのマークアップです。私には問題ないようです。

私のマークアップ

完全に明確にするために、編集ボタンをクリックすると問題が発生します。

次の関数を呼び出します（現在は「on」を使用しています：

$("button.edit-todo").on("click", function(){
//load the data from this row
var task = $(this).closest('tr').children('td.todo-task').text();
var client = $(this).closest('tr').children('td.todo-client').text();
var due = $(this).closest('tr').children('td.todo-due').text();
var todoid = $(this).closest('tr').attr('id');

$("div#todo-form input.todo-task").val(task);
$("div#todo-form select").val(client);
$("div#todo-form input.todo-due").val(due);
$("div#todo-form input.key").val(todoid);
});

行 286 をクリックすると、tri id がフォームの非表示フィールドに追加されるという点で、意図したとおりに機能します (ページの読み込み時に存在していました)。行 297 をクリックしても (DOM で認識している限りでは?)、id が非表示フィールドに渡されません...

助けてください！！！私の頭をやっている... ！

4

2 に答える 2

1

ロードされたデータに ID を使用することは、もはや快適な方法ではありません。ID の代わりにクラスを使用します。

また、jQuery は「bind」メソッドを「on」メソッドに変更しました。「オン」を使用することをお勧めします。

例えば：

$(document).on("click", ".edit-todo", function(){
   var task = $(this).closest('tr').children('.todo-task').text();
   var todoID = $(this).closest('tr').attr("id");

   $(".todo-form .todo-task").val(task);
   $(".todo-form .key").val(todoID);
});

また、ソースは、動的 DOM ではなく、ドキュメントの読み込み時にコードを表示します。

于 2013-11-11T23:30:56.330 に答える