0

私はjavascriptに非常に慣れておらず、壁にぶつかりました。

基本的に、私はリクエストを行うために使用されるいくつかのフィールドを持つフォームを持っています（私は他の誰かのコードで作業しています）。

このフォームの機能の1つは、ドロップダウンからリクエストの量を選択することにより、フォームの多くの複製が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、つまりjavascriptと同じ＃Check_2、＃Row_2、＃Check_3、＃Row_3などを返します。これは正しいです。しかし、レンダリング時にjqueryをロードするにはどうすればよいですか？

4

1 に答える 1

0

新しいフィールドは動的に入力されるため、.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>

次に、new属性togglesとtogglabledata属性を使用します

$('[data-toggles]').live("click", function() {
    if ($(this).is(":checked")){
        $(this).parents("tr").siblings("[data-togglable]").show();
    } else {
        $(this).parents("tr").siblings("[data-togglable]").hide();
    }
});
于 2012-05-04T18:42:49.687 に答える