Добавление события onclick внутри конструктора объекта в javascript - PullRequest
Новая
       14

Добавление события onclick внутри конструктора объекта в javascript

0 голосов
/ 01 апреля 2020

У меня есть класс CDialogOption. Диалоговая опция создается внутри диалогового окна и имеет имя, действие и элемент html. Действие - это объект, который имеет функцию «execute», которая должна выполняться, когда пользователь щелкает элемент html объекта опции диалога. В целях тестирования я деактивировал this.action.execute () и заменил его на console.log («Это работает!»). Вот код: 

class CDialogOption extends CUIObject
   {
   constructor(_name, _dialogBoxName, _action)
   {
      super(_name);
      this.action = _action;
      this.dialogBoxName = _dialogBoxName;
      this.element = $('<div />', {class: 'dialogOption UIObject', id: this.name}).text(this.action.name).appendTo("#"+this.dialogBoxName);
      this.element.onclick = function ()
      {
         console.log("It works!");
         //this.action.execute();
      };
   }
}

Моя проблема сейчас заключается в том, что ничего не происходит, когда Я нажимаю на элемент. Я знаю, что в inte rnet есть несколько постов и руководств, объясняющих, как добавить событие onclick с помощью javascript, и я пытался воспроизвести его внутри этого конструктора, но у меня это не сработало. Может быть, вы могли бы объяснить мне, почему.

Ответы [ 2 ]

0 голосов
/ 01 апреля 2020

this.element содержит объект jquery, а не объект DOM.

Вы должны: 

this.element.click(function ()
{
    console.log("It works!");
    //this.action.execute();
});
0 голосов
/ 01 апреля 2020

this.element является jQuery объектом.

Так что попробуйте 

this.element.on("click",function()  {
  console.log("It works!");
});

Альтернативы: 

const div = $('<div />', {
    class: 'dialogOption UIObject',
    id: "Name"
  })
  .on("click",() => { console.log("from jQuery one") })
  .text("action")
  .appendTo("#x");
  
div[0].addEventListener("click", () => {
  console.log('it works')
});
div.on("click",() => { console.log("from jQuery too") })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="x"></div>
...