0

我对javascript很陌生并且碰壁了。

基本上我有一个表单，其中包含一些用于发出请求的字段（我正在使用其他人的代码）。

此表单的功能之一是能够发送多个请求，通过从下拉列表中选择请求数量，该表单的许多副本将使用 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 在渲染时加载呢？

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>

然后，使用 newtoggles和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 回答