Loading...
Spoon avatar 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>

 

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

Тагове:
0
JavaScript Advanced 09/11/2016 22:18:12
Nikola_Andreev avatar Nikola_Andreev 671 Точки

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

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

 

1
psdimitrov avatar 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)
1
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.