JQuery on () метод не привязывает события, но работает в консоли

Question

Я пишу некоторый код TS для динамической генерации кнопки, кнопка появляется на странице, но все события на ней не работают. Я уже прочитал ответы о делегировании и использую его, но проблема не решена.

Самое странное, что если я вызываю $("#myID").click() или .mouseover() или .mousedown() в консоли, все события работают правильно.

РЕДАКТИРОВАТЬ И ЗАКРЫТЬ:

Извините за трату времени, я просто добавил на свой фон атрибут z-index css до -100, и я не знаю почему, но нажатие на кнопку было невозможно, потому что даже если оно было видно, оно находилось за фоновым div.

Answer 1

Иерархических селекторов часто можно избежать, просто прикрепив обработчик к более подходящей точке в документе. Например, вместо $( "body" ).on( "click", "#commentForm .addNew", addComment ) используйте $( "#commentForm" ).on( "click", ".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

Изменить: Пожалуйста, не обращайтесь к этому, это неправильно

Можете ли вы попробовать это. Включение вашей логики c в функцию и передача ее в 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);
  }
});