0

ユーザーがテーブル内のセルをクリックしたときに編集可能にしようとしているテーブル内の行のリストがあります。私の計画は、このデータを更新するために AJAX 要求を行うことです。

これが私のHTMLの例です：

<tr>
    <td>3</td>
    <td class="textFieldCell"><span class="textField" data-question-id="3">Is the instructor aware of their self development and self improvement areas they are working toward as part of their planned delivery and self peer or tutor assessment?</span></td>
    <td class="sortOrderFieldCell"><span class="sortOrderField" data-question-id="3">3</span></td>
    <td><a href="#" class="deleteQuestion" data-questionid="3">Delete Question</a></td>
</tr>

ここでの考え方は、ユーザーがテーブル内のスパンをクリックすると、ユーザーがデータを変更できる入力ボックスに置き換えられ、ぼかしに対して AJAX 呼び出しが行われるというものです。私は AJAX 呼び出しを作成することに完全に満足していますが、ボックス テーブル セルで jQuery が一度だけ入力フィールドに変更できるという問題があります。この問題の段階的な説明は次のとおりです。

  1. ユーザーが表のセルをクリックすると、正常に機能し、スパンが入力ボックスに置き換えられます。
  2. 次に、ユーザーが入力ボックスをクリックしてオフにすると、入力ボックスが問題なくスパンに変わります。
  3. ここに問題があります。ユーザーが同じテーブル セルをクリックして再度編集しようとすると、jQuery が実行されません。

これが私のjQueryです：

jQuery('.sortOrderField').click(function() {
        var input = jQuery('<input />', {'type': 'text', 'class': 'sortOrderField', 'name': 'aname', 'value': jQuery(this).html()});
        jQuery(this).parent().append(input);
        jQuery(this).remove();
        input.focus();
        jQuery('.sortOrderFieldCell input').blur(function() {
            var html = "<span class='sortOrderField' data-question-id='3'>" + jQuery(this).val() + "</span>";
            jQuery(this).parent().append(html);
            jQuery(this).remove();
        });
    });

この jQuery がテーブル セルで 1 回しか実行されない理由について、何か考えがある人はいますか?

4

2 に答える 2

1

ここでイベント委任を使用する必要があります

jQuery(document).on('click', '.sortOrderField', function() {
    var input = jQuery('<input />', {'type': 'text', 'class': 'sortOrderField', 'name': 'aname', 'value': jQuery(this).html()});
    jQuery(this).parent().append(input);
    jQuery(this).remove();
    input.focus();
});
jQuery(document).on('blur', '.sortOrderFieldCell input', function() {
    var html = "<span class='sortOrderField' data-question-id='3'>" + jQuery(this).val() + "</span>";
    jQuery(this).parent().append(html);
    jQuery(this).remove();
});

デモ:フィドル

于 2013-08-08T12:56:49.523 に答える
0

現在クラス sortOrderField を持つページ内のすべてのアイテムにイベントを添付しています。

ただし、jQuery(this).remove();ページから要素を削除すると、トリガーがそれに伴います。

トリガーを残すには、セレクター引数を使用して親要素にアタッチする必要があります。次に例を示します。

jquery('table.editableTable').on( 'click', '.sortOrderField', function() {
    var input = jQuery('<input />', {'type': 'text', 'class': 'sortOrderField', 'name': 'aname', 'value': jQuery(this).html()});
    jQuery(this).parent().append(input);
    jQuery(this).remove();
    input.focus();
});
jQuery('table.editableTable').on('blur', '.sortOrderFieldCell input', function() {
    var html = "<span class='sortOrderField' data-question-id='3'>" + jQuery(this).val() + "</span>";
    jQuery(this).parent().append(html);
    jQuery(this).remove();
});

この例では、行がクラス editableTable のテーブルにあると想定しています。このコードは、新しいテーブルをページに動的に追加していないことも前提としています。

パフォーマンス上の理由から、これらのイベントをトリガーが発生する要素の可能な限り最も近い親に置くことをお勧めします。ページと、あなたがどれだけパフォーマンスを求められているか。

詳細については、jquery .on() のドキュメントを確認してください。

于 2013-08-08T13:06:15.750 に答える