Как framework7 добавить событие click в динамические элементы?

Если я сначала добавлю свой элемент в моем представлении, событие click работает нормально, как показано ниже:

<div class="test">Click Me</div>

$$('.test').on('click', function () {
    myApp.alert("Gotcha!");
}); 

Но если у меня есть динамические элементы, особенно элементы, динамически добавляемые в virtual-list, я не могу заставить событие click работать. Как правильно это сделать?

Я даже попробовал встроенную функцию, например: <div class="test" onclick="myFunction();">Click Me</div>, но это не сработает.

0
JunM 12 Дек 2016 в 14:48

4 ответа

Лучший ответ

Вы можете использовать:

// Live/delegated event handler
$$(document).on('click', 'a', function (e) { 
  console.log('link clicked'); 
});

Для вашего случая:

$$(document).on('click', '.test', function(e){
  console.log('Some code...');
});

Вот документы. Прокрутите до раздела events.

2
Farkhat Mikhalko 12 Дек 2016 в 11:52

В функции, в которой вы динамически добавляете новые элементы, вы должны назначить для них обработчик событий.

Допустим, у вас есть функция, как это

function addNewLines(){
  //add the new lines here
  // you have to run this again
  $$('.test').on('click', function () {
     myApp.alert("Gotcha!");
  }); 
}
0
lacexd 12 Дек 2016 в 11:53

Используйте это для динамически добавляемых элементов:

$$(document).on('click', '.test', function () {
    myApp.alert("Gotcha!");
}); 
1
Ionut Necula 12 Дек 2016 в 11:54

Все ответы хороши. Но если вы используете этот класс 'test' для других элементов страницы, вы в конечном итоге вызовете дополнительное событие щелчка (когда вы щелкаете по любому другому элементу того же класса). Поэтому, если вы хотите предотвратить это, вы должны добавить слушателя к этому конкретному элементу.

Если вы добавляете элемент класса test к существующему элементу id testId, тогда используйте

 $('#testId').on('click', '.test', function(this){

   }
1
Viplock 12 Дек 2016 в 12:07