Question

I am very new to javascript and hit a wall.

Basically I have a form with a few fields used to make requests (I am working with someone elses code).

One of the features of this form is the ability to send multiple requests, by selecting the amount of requests from a drop down, that many duplicates of the form will load using ajax.

I recently added 2 new fields to this form. A checkbox and a text field. Using jquery I did a simple toggle so that if the checkbox is checked, the text field will appear.

<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>

This is working as expected, however it is not working when I select multiple requests. The tables that are loaded via ajax are not loading the javascript part of it, so those fields are not toggled when checked,

I have checked the syntax and everything seems fine. The php is returning the correct field id’s ie #Check_2 , #Row_2 , #Check_3, #Row_3 etc etc same for the javascript , it is correct. But how can I get the jquery to load when it is rendered?

Answer 1

Since the new fields come in dynamically, the .click handler is not attached.

Try using:

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

— Update —

I just saw that you mentioned your ids are changing. In that case, I would suggest you add another attribute to your html, and use that as the selector.

Eg:

<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>

And then, use the new toggles and togglable data attributes

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