Question

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

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

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

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

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

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

Answer 1

你需要一个直播活动，因为你的元素最近会出现在DOM中。

$(document).on('click', 'input[type=checkbox][id^=option]', function() {
  alert('clicked');
});

Answer 2

我认为问题比仅仅需要一个实时事件处理程序更深入，因为提供这样的事件处理程序并不能完全解决同样的问题。 jQuery对话框最终克隆HTML以创建/显示对话框，该对话框复制克隆中的ID。在click事件处理程序中，如果我使用形式为$('#'+id)的简单id选择器来查找相应的input元素，则它在对话框中找不到input元素。我最终将选择器限制为我所在的当前表单，如$(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;
});

单击复选框标签在ajax模式中不起作用

2 个答案: