Klicken Sie auf Ereignis auf dynamische Elemente nicht funktioniert

Question

In framework7, wie Ereignis click auf dynamische Elemente hinzufügen?

Wenn ich mein Element hinzufügen zuerst auf meiner Meinung nach funktioniert das Click-Ereignis wie unten fein:

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

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

Aber wenn ich dynamische Elemente, vor allem Elementen dynamisch hinzugefügt virtual-list, kann ich nicht macht die click Veranstaltung Arbeit. Was ist der richtige Weg?

Ich habe sogar versucht, Inline-Funktion, zB: <div class="test" onclick="myFunction();">Click Me</div>, immer noch wird dies nicht funktionieren.

Answer 1

können Sie verwenden:

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

Für Ihren Fall:

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

ist hier docs. Blättern Sie bis zum Abschnitt events.

Answer 2

In der Funktion, in der Sie die neuen Elemente dynamisch hinzufügen, müssen Sie ihnen einen Event-Handler zuweisen.

Können sagen, Sie haben eine Funktion, so etwas wie dieses

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

Answer 3

Verwendung dieser für dinamically hinzugefügt Elemente:

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

Answer 4

Alle Antworten sind gut zu gehen mit. Aber wenn Sie diese Klasse "test" für andere Elemente der Seite verwenden, werden Sie am Ende ein zusätzliches Klickereignis auslösen (wenn Sie auf ein anderes Element derselben Klasse klicken). Wenn Sie das verhindern möchten, sollten Sie diesem bestimmten Element Listener hinzufügen.

, wenn Sie ein Element der Klasse test zu einem vorhandenen Element von ID testId sind das Hinzufügen, dann verwenden

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

    }