0

我有一个格式如下的复选框：

<label for="option1">
    <input type="checkbox" id="option1"> Foo
</label>

该复选框出现在 jQuery 模式中。当从激活模态的同一页面中提取模态的内容时，然后按<label>预期单击选中复选框。

但是，当通过 Ajax 从外部文件中提取完全相同的模态内容时，单击<label>不再选中复选框。您必须直接单击复选框来检查它。

<label>如果通过 Ajax 拉取内容，为什么点击行为会发生变化？

（如果需要，我可以提供我用来提取外部文件的 JS，但我认为这可能是一个更广泛的问题/解决方案。）

4

2 回答 2

0

我认为这个问题比简单地需要一个实时事件处理程序更深，因为提供这样一个事件处理程序并没有完全解决我同样的问题。jQuery 对话框最终克隆了 HTML 以创建/显示对话框，该对话框复制了克隆中的 id。在 click 事件处理程序中，如果我使用表单的简单 id 选择器$('#'+id)来查找相应的输入元素，它并没有在对话框中找到输入元素。我最终将选择器限制为我所处的当前形式，如$(this).closest('form').find('#'+id)，这对我有用。完整的处理程序如下所示：

$(document).on('click', 'form label', function(e) {
    var id = $(this).attr("for");
    if (id.length > 0) {
        // Because this is a dialog box, restrict our search to
        // the form we are currently on to avoid finding the same id
        // elsewhere.
        var $checkbox = $(this).closest('form').find('#'+id);
        $checkbox.attr("checked", !$checkbox.attr("checked"));
    }
    return false;
});
于 2013-02-25T22:06:38.733 回答
0

您需要一个实时事件，因为您的元素稍后会出现在 DOM 中。

$(document).on('click', 'input[type=checkbox][id^=option]', function() {
  alert('clicked');
});
于 2012-05-17T18:10:11.663 回答