Question

我正在使用jquery创建一个带有跨度的div，就像这样

$("[data-modal]").click(function(event) {
    event.preventDefault();

    var container = $("<div></div>").addClass("modal m-form").appendTo(document.body);
    var close = $("<span></span>").addClass("modal-close").appendTo(container);
}

到目前为止一直很好......

然后，我将事件绑定到选择器模态关闭，就像这样

$(".modal-close").click(function(event) {
    alert("close the dialog");
});

那个不起作用，所以我试过这个，没有成功：

$(".modal-close").on("click", function(event) {         
    alert('close the dialog');
});

我做错了什么？

Answer 1

您必须将其绑定到下一个静态父级。意味着如果你有一个永远不会被改变的父元素，将它绑定到它（在你的情况下可能是整个模态的包装器）。如果您没有静态包装器，您也可以将其绑定到文档：

$(document).on('click', '.modal-close', function(event) {
    alert("close the dialog");
});

Answer 2

要将事件绑定到动态创建的元素，您可以使用.on()。您错误地使用了.on()，请检查以下代码 -

$(document).on("click",".modal-close", function(event) {
    alert("close the dialog");
});

<强> More Information for .on()

将事件绑定到动态创建的div

2 个答案: