Click event on dynamic elements not working

Question

In framework7 , how to add click event on dynamic elements?

If I add my element first on my view, the click event works fine like below:

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

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

But if I have dynamic elements, especially elements dynamically added to virtual-list , I cannot make the click event to work. What is the right way to do this?

I even tried inline function, ex: <div class="test" onclick="myFunction();">Click Me</div> , still this won't work.

Answer 1

You can use:

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

For your case:

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

Here is docs . Scroll until events section.

Answer 2

Use this for dinamically added elements:

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

Answer 3

All answers are good to go with. But if you are using this class 'test' for other elements of the page, you will end up firing some extra click event(when you click on any other element of same class). So if you wanna prevent that, you should add listener to that particular element.

if you're adding an element of class test to an existing element of id testId , then use

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

   }

Answer 4

In the function where you dynamically add the new elements you have to assign an event handler for them.

Lets say you have a function something like this

function addNewLines(){
  //add the new lines here
  // you have to run this again
  $$('.test').on('click', function () {
     myApp.alert("Gotcha!");
  }); 
}