Replaced div is not working Jquery Mobile - jquery-mobile

Question

Basically I replaced the div in the content as soon as I click "Delete" on the Setting menu above. Well it does changes from collapsible set into checkbox with footer below containing two buttons. The buttons are delete and cancel but I can't perform anything with those buttons. For example, If Cancel clicked it should pop the alert popup (For the sake of testing). Please help..
<div data-role="content">
Tambah Katagori
<div id="Outcome" data-role="collapsibleset" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"></div>
</div>
$("#Delete").click(function(){
$("#Outcome").replaceWith('<form><fieldset data-role="controlgroup" id="OutcometoDelete">');
db.transaction (function (transaction)
{
var sql = "SELECT * FROM KatagoriPengeluaran";
transaction.executeSql (sql,[],
function (transaction, result)
{
if (result.rows.length)
{
for(var i = 0; i< result.rows.length; i++ ) {
All2 =result.rows.item(i);
element = $(' <input type="checkbox" name="'+All2.Katagori+'" id="'+All2.Katagori+'"><label for="'+All2.Katagori+'">'+All2.Katagori+'</label>').appendTo($('#OutcometoDelete'));
}
All2 =result.rows.item((result.rows.length-1));
$('#'+All2.Katagori).append('</form></fieldset>');
$("#OutcometoDelete").append('<div id="someFooter" data-role="footer" data-position="fixed"><div id ="navbarFooter" data-role="navbar"><ul><li><a data-role="button" href="#popUpDelete">Delete</a></li><li><a data-role="button" href="index.html#Pengeluaran" data-ajax="false" id="cancelDelete" >Cancel</a></li></ul></div></div>');
$("#OutcometoDelete").trigger('create');
$("#someFooter").trigger('pagecreate');
$('#navbarFooter').trigger('pagecreate');
}
else
{
alert ("Retrieval Error");
}
}, error);
});
});
$("#cancelDelete").click(function(){
alert("oi");
});

Answer 1

This is because your way of event binding will not work for future elements. You can't just bind click event and expect it will work in the future, event(s) must be bind to something inside the DOM.
So this code will not work:
$("#cancelDelete").click(function(){
alert("oi");
});
On the other hand this code will work:
$(document).on('click',"#cancelDelete",function(){
alert("oi");
});
Second code will work because event is bind to document and it will propagate as soon as needed element is part of the DOM and appropriate event is trigger on it. This is also called delegated event binding.