ところが、このようにすると、追加したliをクリックしたときに、
なんかいも$.getが発生してしまいます。
liクリックした要素のみ$.getすればいいのですが、どのようにしたらよいでしょうか。
$.get("/api/bt?l="+$(this).children('input').val(), function(data){
$("#bM").html(data);
$(document).on('click', 'ul#bM li a', function(){
$.get("/api/bt?l="+$(this).children('input').val() +
"&m="+$(this).children('input').val(), function(data){
$("#bS").html(data);
});
});
});
うーん、これで合っているかは分かりませんが、こういう感じでしょうか?
http://nullppon.net/test/
何かのヒントとなればいいのですが。
ソースコードは以下のような感じです。
[JavaScript]
$(function(){
$(document).on('click', '#items li', function(){
$.get('bs.php', {
l: $(this).children("input[name='l']").val(),
m: $(this).children("input[name='m']").val()
}, function(data){
console.log(this);
$('#output').after('<p>'+data+'</p>');
});
});
//要素追加
$('#add').click(function(){
$("#items").append('<li><a href="javascript: void(0);">'+$('input[name="ll"]').val()+' | '+$('input[name="mm"]').val()+'</a><input type="hidden" name="l" value="'+$('input[name="ll"]').val()+'"><input type="hidden" name="m" value="'+$('input[name="mm"]').val()+'"></li>');
});
});
[HTML]
<input type="text" name="ll" value="(`・ω・´)">
<input type="text" name="mm" value="キタ――(゚∀゚)――!!">
<input type="button" id="add" value="ADD">
<ul id="items">
<li><a href="javascript: void(0);">Σ(゚◇゚;)マジデッ!? | (´・ω・`)</a><input type="hidden" name="l" value="Σ(゚◇゚;)マジデッ!?"><input type="hidden" name="m" value="(´・ω・`)"></li>
</ul>
<div id="output"></div>
[PHP]テスト用なので悪しからず
<?php
if(isset($_GET['l'])){
$l = $_GET['l'];
echo $l;
}
if(isset($_GET['m'])){
$m = $_GET['m'];
echo $m;
}
?>
ありがとうございます!!確認してみます!
2014/03/21 08:56:43