下記のようなソースで、jqueryで動的に追加した要素に対してクリックイベントを設定しました。


ところが、このようにすると、追加した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);
});
});
});

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2014/03/27 23:00:04
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答1件)

id:typeof_the_end No.1

回答回数1ベストアンサー獲得回数0

ポイント100pt

うーん、これで合っているかは分かりませんが、こういう感じでしょうか?
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;
}
?>

id:yayayai

ありがとうございます!!確認してみます!

2014/03/21 08:56:43

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません