Bindung dynamisch hinzugefügter Elemente in jQuery mobile - Javascript, HTML, Jquery-Mobile

Ich versuche, einige Listenelemente zu löschen, nachdem ich sie dynamisch hinzugefügt habe.

Sie können die Liste aktualisieren und anschließend auf ein Listenelement klicken, um es zu löschen.

Html:

<p>Test</p>
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
<br>
<input type="button" value="Update" id="button">

Javascript:

var new_list =
"<ul data-role="listview">" +
"<li class="delete">Dog</li>" +
"<li class="delete">Cat</li>" +
"</ul>";

$("#button").off("click").on("click", function () {
$("ul").remove();
$("p").after(new_list);
$("ul").listview();
});

$(".delete").off("click").on("click", function () {
$( this ).remove();
});

Antworten:

Die richtige Methode zum Binden von Ereignissen an dynamisch hinzugefügte Elemente lautet wie folgt.

$(document).on("event", ".selector", function () {
$(this).remove();
$("ul_selector").listview("refresh");
});