JQuery on()方法不绑定事件，但可在控制台中工作

Question

我正在写一些TS代码来生成一个按钮，按钮通常会出现在页面上，但上面的所有事件都不起作用。我已经阅读了关于授权和我使用授权的回答，但问题并没有解决。

最奇怪的是，如果我在控制台中调用$("#myID").click()、.mouseover()或.mousedown()，所有事件都能正常工作。

编辑并关闭：

很抱歉浪费时间，我只是把z-index css属性放在后台-100，我不知道为什么，但按钮不可能被点击，因为即使它是可见的，它也在后台div后面。

Answer 1

层次选择器通常可以通过将处理程序附加到文档中更合适的点来避免。例如，使用$( "#commentForm" ).on( "click", ".addNew", addComment )代替$( "body" ).on( "click", "#commentForm .addNew", addComment )。

https://api.jquery.com/on/

我怀疑贵国代表团过于复杂。请考虑以下示例。

$(function() {
$("#add").click(function(e) {
var item = $("<div>", {
id: "image-button-1",
class: "button"
}).appendTo("#container");
$("<img>", {
src: "https://i.imgur.com/9yMnjGx.png"
}).appendTo(item);
});
$("#container").on("click", "#image-button-1", function(e) {
console.log("Click");
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Add</button>
<div id="container"></div>

Answer 2

编辑：请不要参考这个，这是不正确的

你能试试这个吗。将逻辑封装在函数中并将其传递给jQuery可以确保在页面完全加载后调用它。

当您试图将事件处理程序绑定到元素时，必须确保该元素实际存在于DOM中。

this.htmlElement = "<div id='" + this.ID + "' class='" + this.cssClasses + "'>" + this.buttonImage + "</div>";
$("#" + this.idContainer).append(this.htmlElement);
$(function() {

if (this.enabled) {
$(document).on('mousedown', "#" + this.ID, function (event) {
console.log("down");
});
$(document).on("mouseup", "#" + this.ID, function () {
console.log("up");
});
$(document).on("click", "#" + this.ID, this.action);
}
});