ロードjavascriptのは、私はJavaScriptに非常に新しいですし、壁にぶつかる

Question

をレンダリングします。

は基本的に私は（私がよそのコードで働いています）要求を行うために使用されるいくつかのフィールドを持つフォームを持っています。

この形式の特徴の一つは、フォームの多くの重複がAJAXを使用してロードすること、ドロップダウンからのリクエストの量を選択することで、複数の要求を送信する機能です。

私は最近、このフォームに2つの新しいフィールドを追加しました。チェックボックスとテキストフィールド。 jqueryを使用すると単純なトグルを行い、チェックボックスをオンにするとテキストフィールドが表示されるようにしました。

<tr> 
    <td> 
     Allow Checkbox 
    </td> 
    <td> 
     <input type="checkbox" name="Check_1" id="Check_1" value="2" />I accept 
    </td> 
</tr> 
<tr id="Row_1" style="display:none;"> 
    <td> 
     Here is a text field 
    </td> 
    <td> 
     <input type="text" name="field_1" id="field_1" value="" /> 
    </td> 
</tr> 
<script> 
         $('#Check_1').click(function() { 
         $("#Row_1").toggle(); 
         }); 
         </script> 

これは期待どおり動作していますが、複数のリクエストを選択すると機能しません。 AJAX経由でロードされたテーブルは、それのjavascriptの一部をロードしていないので、チェックしたときにこれらのフィールドがトグルしていない、

私は、構文をチェックしているし、すべてがうまくようです。 PHPは正しいフィールドID、つまり＃Check_2、＃Row_2、＃Check_3、＃Row_3などをjavascriptと同じものに戻しています。正しいです。しかし、jqueryをレンダリングするときに、どのようにロードするのですか？

Answer 1

新しいフィールドを動的にでてくるので、.clickハンドラは付属しません。

は、使用してみてください：

$('#Check_1').live("click", function() { 
    $("#Row_1").toggle(); 
}); 

- 更新 -

私はちょうどあなたがあなたのidsが変化している言及したことを見ました。その場合、私はあなたのhtmlに別の属性を追加し、それをセレクタとして使用することをお勧めします。

例：

<tr> 
    <td> 
     Allow Checkbox 
    </td> 
    <td> 
     <input type="checkbox" name="Check_1" id="Check_1" value="2" data-toggles />I accept 
    </td> 
</tr> 
<tr id="Row_1" style="display:none;" data-togglable> 
    <td> 
     Here is a text field 
    </td> 
    <td> 
     <input type="text" name="field_1" id="field_1" value="" /> 
    </td> 
</tr> 

そしては、新しいtogglesとtogglableデータが

$('[data-toggles]').live("click", function() { 
    if ($(this).is(":checked")){ 
     $(this).parents("tr").siblings("[data-togglable]").show(); 
    } else { 
     $(this).parents("tr").siblings("[data-togglable]").hide(); 
    } 
});