Закачане на метод (функция) на клик атрибут на даден елемен

Spoon 3 Точки

Закачане на метод (функция) на клик атрибут на даден елемен

Здравейте.

Имам следният казус и се надявам на малко помощ от ваша страна.

Имам един клас, който има методи - 'Create', 'Update', 'Delete'.

В метод 'Create', създавам елемент, който впоследствие искам да може да се редактира, следователно му слагам 'onclick', който да изпълнява 'Update' метода. Точно тука работата не работи. Ако инстацирам класът, и подам инстанция.метод във 'onclick', ще работи.

Изглежда така :

Class ImageBox {

  
  createBox() {
    
    var html = '';
    html += '<div>';
    html += '<button onclick="this.updateBox()">Update Box</button><button onclick="this.deleteBox">Delete Box</button>';
    html += '</div>';
    $("body").append(html);
  }

  updateBox() {
  alert('Update the box');
  }

  deleteBox() {
  alert('Delete the box');
  }
}
var imgBox = new ImageBox();
<body>
<button onclick="imgBox.createBox()">Create the First box</button>
</body>

Благодаря предварително.
Поздрави!

Тагове:

09/11/2016 22:16:15 JavaScript Advanced 09/11/2016 22:18:12

Nikola_Andreev 671 Точки

Трябва да го направиш на jQuery елемент и да му закачиш функиця. Също и this вътре в бутона е самият бутон, а извън него е класа и затова трябва да го излъжеш с една променлива отгоре. Ето така ще стане:

 createBox() {
        let that = this
        let element = $('<button>Update Box</button>').on('click',function () {
            that.updateBox()
        })
        $("body").append(element);
    }

10/11/2016 00:03:44

psdimitrov 75 Точки

Може да го направиш с jQuery така:

createBox() {
    $("body").append($('<div>')
            .append($('<button>').text('Update box').on('click', () => {
                this.updateBox();
            }))
            .append($('<button>').text('Delete box').on('click', () => {
                this.deleteBox();
            })));
}

С Arrow - функция може да използваш this без да се налага да го присвояваш на променлива, защото Arrow функциите нямат собствен this, arguments, super или new.target.

А тъй като извикваш само една функция при клик, още по-кратко може да се напише така:

...on('click', this.updateBox)

10/11/2016 16:26:28