0

重複の可能性:
jQuery - 追加された選択の .change() が機能しない

値が変更されるたびにフォームをphpファイルに送信しようとしています...ユーザーが別の入力フィールドを追加できるようにする関数があります

この例のために、デフォルト フィールド (ユーザーがページに入ったときにすぐに使用できるフィールド) を「デフォルト フィールド」と呼び、追加された行を「追加フィールド」と呼びます。

ユーザーがデフォルトのフィールドをクリックして、フォームが自動的に送信する値を選択すると、何が起こるか..しかし、ユーザーは行を追加し、フォームが自動的に送信しない追加フィールドの値を選択します.実際に送信をクリックするには、追加されたフィールドにIDを追加し、そのIDを使用してjquery経由でアクセスしようとしましたが、まだ機能しません..追加された行が追加されているため、jqueryはそれらを認識しません...おそらく間違っていますしかし、それは私の最善の推測です。

これが私のjqueryです：

$(function(){
     $("select").change(function(){
    $("#myform").submit();
     });
     $('#rowInput select').change(function(){
    $("#myform").submit();
     });

   });


$(function(){
        $("#add").click(function(){
            $("<tr id = 'rowInput'><td><select name = 'grades[]'><option value = '0'> SELECT </option><option value = 'A'>A</option><option value = 'AMINUS'>A-</option><option value = 'BPLUS'>B+ </option><option value = 'B'>B</option><option value = 'BMINUS'>B-</option><option value = 'CPLUS'>C+ </option><option value = 'C'>C</option><option value = 'CMINUS'>C-</option><option value = 'DPLUS'>D+ </option><option value = 'D'>D</option><option value = 'DMINUS'>D-</option><option value ='F'>F</option></select></td></tr>").fadeIn(200).appendTo("table");

        });

html:

<form id = 'myform'>
   <table>
      <tr><td> 
        <select name = 'grades[]'>
             <option value = '0'> SELECT </option>
             <option value = 'A'>A</option>
             <option value = 'AMINUS'>A-</option>
             <option value = 'BPLUS'>B+ </option>
             <option value = 'B'>B</option>
             <option value = 'BMINUS'>B-</option>
             <option value = 'CPLUS'>C+ </option>
             <option value = 'C'>C</option>
             <option value = 'CMINUS'>C-</option>
             <option value = 'DPLUS'>D+ </option>
             <option value = 'D'>D</option>
             <option value = 'DMINUS'>D-</option>
             <option value ='F'>F</option>
       </select>
      </td>
     </tr>

   </table>
   <input type = 'submit' value = 'Submit'/>
</form>
4

1 に答える 1

10

イベント リスナーを登録する時点ではselect要素を使用できないため、イベント デリゲーションを使用する必要があります。

$('#myform').on('change', 'select', function () {
    // run your code here...
});

ドキュメントからの引用は次のとおりです。

セレクターが提供されている場合、イベント ハンドラーは委任されていると見なされます。イベントがバインドされた要素で直接発生した場合、ハンドラーは呼び出されませんが、セレクターに一致する子孫 (内部要素) に対してのみ呼び出されます。

[...]

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。

于 2013-02-05T20:46:33.340 に答える