Question

我有bootstrap模式，带有视图注释和添加注释功能。我按下回车尝试添加评论，而我的模态没有任何可见按钮。问题是因为按钮和textarea是动态呈现的，我必须将它们绑定到文档，这是我努力的地方。这样做的正确方法是什么？正如我从官方文档中所理解的，首先我应该指定事件（在我的情况下为keyup和click），第二个选择器（textarea和按钮的id），然后是数据和处理程序。我不明白我的情况是什么。

HTML：

<textarea id="add-comment-textarea"></textarea>
<input type="submit" id="add-comment-button" style="position: absolute; left: -9999px; width: 1px; height: 1px;" tabindex="-1" />

使用Javascript：

$(document).off('keyup', '#add-comment-textarea');
$(document).on('keyup', '#add-comment-textarea', function(event) {
    if(event.keyCode === 13) {
        console.log('key up');
        $('#addComment').click();
    }
});

$(document).off('click', '#add-comment-button');
$(document).on('click', '#add-comment-button', function() {
    console.log('clicked');
});

Answer 1

您必须在 on 函数中使用简单的空格设置事件。此外，您必须在“逗号分隔中编写选择器。 on 函数的最后一个参数是在事件之前分配的原始处理程序（参见{{3 }}）。

所以你可以像这样使用它：

$(document).off('click keyup', '#addComment, #add-comment-textarea');
$(document).on('click keyup', '#addComment, #add-comment-textarea', function() { /* Do something */ });

但是，我不确定这是否符合您的要求。我会使用 off 功能取消注册事件。之后，我会将事件直接注册到html元素：

$(document).off('click keyup', '#addComment, #add-comment-textarea');
$('#addComment').click(function() { /* Do something */ });
$('#add-comment-textarea').keyup(function(event) { /* Do something */ });

Answer 2

实际上，在将脚本从模态部分移动到主视图后问题得以解决。

Answer 3

为了完成回复，请注意始终将根元素减少到最接近目标：如果注释元素始终停靠在可访问的div中，则可以识别它，然后使用$（“＃yourdiv” ）.on（等）代替。

用于动态呈现元素的JQuery document.on和document.off

3 个答案: