Onsen UI tabberのホームに動的にリンクを読み込み、イベントを生成したい
初めて質問をさせていただきます。
バックエンドから読み込んだデータをpage1のulに、リンクを持ったリストとして追加します。
その後、リンクをクリックするとブラウザを起動するアプリを作成しようとしています。
しかし、リンクをクリックしてもイベントが発生しません。
index.htmlだけのファイルで作成した際は、クリックしてブラウザが起動したのですが、Onsen UI の tabberに変えてからイベントが発生しなくなったので、tabberの使い方に問題があるのではと考えましたが、わかりませんでした。
また、page1からpage2に移動して、戻ってくると、追加したリスト自体も見えなくなってしまっています。
ご教授お願い致します。
//index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.bootstrap();
</script>
<script src="js/scripts.js"></script>
</head>
<body>
<ons-tabbar var="tabbar">
<ons-tabbar-item
icon="home"
label="Home"
page="navigator.html"
active="true"></ons-tabbar-item>
<ons-tabbar-item
icon="comment"
label="Comments"
page="page2.html"></ons-tabbar-item>
<ons-tabbar-item
icon="gear"
label="Settings"
page="page3.html"></ons-tabbar-item>
</ons-tabbar>
</body>
</html>
// page1.html
<ons-toolbar>
<div class="center">test sample</div>
</ons-toolbar>
<div style="text-align: center">
<div id="MainPage">
<section id="MainSection">
<h2>LIST</h2>
<ul id="List">
</ul>
</section>
</div>
</div>
//scripts.js
var currentListID;
var MC = monaca.cloud;
$(function(){
var MC = monaca.cloud;
var lists = MC.Collection("ProgramList");
lists.findMine()
.done(function(items,totalItems)
{
$("#List").empty();
var plist = items.items;
for(var i in plist){
$li = $("<li><a href='" + plist[i].url + "' class='show'><img src='"+plist[i].thumb+"'><p><h3>"+plist[i].title+"</h3>"+plist[i].data+"<br>"+plist[i].hour+"</p></a></li>");
$("#List").prepend($li);
}
if(plist.length == 0){
$li = $("<li>none</li>");
$("#List").prependd($li);
}
$("#List").listview("refresh");
})
.fail(function(err){
//error処理
});
});
$(function(){
$('#List').on('click', function(event){
event.preventDefault();
var href = $(this).attr("href");
window.open(href, "_blank");
});
});