javascriptに関する質問
以下のようにCMSのようなものを作っているのですが、id="ul"の内部にある「消す」や「追加する」のところだけ、javascriptが効きません。どのようにしたら、動きますでしょうか。
詳しい方、ご教示頂けると幸いです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>記事投稿画面</title>
</head>
<body>
<div id="container">
<h1>記事の投稿画面</h1>
<form id="form" method="post" name="insert" action="" enctype="multipart/form-data">
<ul>
<ul id="ul" >
<li class="button menu"><a id="title" class="btn_group" onclick="onClick('title')">大見出し</a></li>
<li class="button menu"><a id="h3" class="btn_group" onclick="onClick('h3')">中見出し</a></li>
<li class="button menu"><a id="img" class="btn_group"onclick="onClick('img')">画像</a></li>
<li class="button menu"><a id="text" class="btn_group" onclick="onClick('text')">テキスト</a></li>
<li><input type="hidden" name="type[]" value="text"><textarea name="content[]" style="width:400px;height:300px;"></textarea><a style="margin:10px;" class="del">消す</a><a style="margin:10px;" class="edit">追加する</a></li>
<li><input type="hidden" name="type[]" value="text"><textarea name="content[]" style="width:400px;height:300px;"></textarea><a style="margin:10px;" class="del">消す</a><a style="margin:10px;" class="edit">追加する</a></li>
</ul>
<li><input type="submit" value="Submit" id="senddiv"></li>
</ul>
</form>
</div><!--.container-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function getHtmlByType(type) {
if(type == 'title'){
var html = '<input type="hidden" name="type[]" value="title"><input name="content[]' + '" type="text" placeholder="大見出し" style="width:400px;height:20px;margin-top:10px;"><a style="margin:10px;" class="del">消す</a><a style="margin:10px;" class="edit">追加する</a>';
}
if(type == 'h3'){
var html = '<input type="hidden" name="type[]" value="h3"><input name="content[]' + '" type="text" placeholder="中見出し" style="width:400px;height:20px;margin-top:10px;"><a style="margin:10px;" class="del">消す</a><a style="margin:10px;" class="edit">追加する</a>';
}
if(type == 'img'){
var html = '<input type="hidden" name="type[]" value="img"><input name="content[]' + '" type="text" placeholder="参照画像のURL" style="width:400px;height:20px;margin-top:10px;"><a style="margin:10px;" class="del">消す</a><a style="margin:10px;" class="edit">追加する</a>';
}
if(type == 'text'){
var html = '<input type="hidden" name="type[]" value="text"><textarea name="content[]' + '" style="width:400px;height:300px;"></textarea><a style="margin:10px;" class="del">消す</a><a style="margin:10px;" class="edit">追加する</a>';
}
return html;
}
function bindEvents(elem) {
$('a.del', elem).on('click', function() {
elem.remove();
});
$('a.edit', elem).on('click', function() {
var aa=$('<ul class="new_elem"><li class="button menu"><a class="title btn_group">大見出し</a></li><li class="button menu"><a class="h3 btn_group">中見出し</a></li><li class="button menu"><a class="img btn_group" >画像</a></li><li class="button menu"><a class="text btn_group">テキスト</a></li></ul>');
aa.insertAfter(elem);
$('a.title', aa).on('click', function() {
aa.remove();
aa = $('<li>'+getHtmlByType('title')+'</li>');
aa.insertAfter(elem);
bindEvents(aa);
});
$('a.h3', aa).on('click', function() {
aa.remove();
aa = $('<li>'+getHtmlByType('h3')+'</li>');
aa.insertAfter(elem);
bindEvents(aa);
});
$('a.img', aa).on('click', function() {
aa.remove();
aa = $('<li>'+getHtmlByType('img')+'</li>');
aa.insertAfter(elem);
bindEvents(aa);
});
$('a.text', aa).on('click', function() {
aa.remove();
aa = $('<li>'+getHtmlByType('text')+'</li>');
aa.insertAfter(elem);
bindEvents(aa);
});
});
}
function onClick(type){
var html = getHtmlByType(type);
var elem = $('<li>'+html+'</li>');
$('#ul').append(elem);
bindEvents(elem);
}
</script>
</body>
</html>