jQuery / Javascript：如何获取Jquery中的点击值？

Question

我在这里有一个小提琴项目，我想在其中获取每个value.full_name的单击值。 但是在这里，当我单击它时，它仅返回第一个值的警报。 如何返回个人价值？

HTML：

<div id="dbg">

</div>

使用Javascript：

 var el = $('#dbg');
    var HtmlData =  LoadData();
  el.html(HtmlData);


 function LoadData()
    {
     var dmJSON="http://api.railwayapi.com/route/train/12728/apikey/3dacdecg/";
     var html = '<div class="row s12"/>';
        $.ajax({
          url: dmJSON,
          dataType: 'json',
          async: false,
          data: {},
          success: function(data) {
          $.each(data.route, function(key, value) {    


                   html += '<a id="click1" href="#menu_modal">' + '<div class="card small">' +'<div align="center" id="rest_name">' + value.fullname + "</div>" + "</div>" + '</a>' + "</div>"

                });

        }
    });
     return html;
   }


                $("#click1").click(
            function () {
                var clickedValue = $('#rest_name').text();
                alert(clickedValue);
            }            
        );

Answer 1

工作小提琴

使用类而不是重复的ID。

您与班级的HTML

html += '<a class="test" href="#menu_modal">' + '<div class="card small">' + '<div align="center" class="test1">' + value.fullname + "</div>" + "</div>" + '</a>' + "</div>"

和Jquery ：

 $(".test").click(
   function() {
     var clickedValue = $(this).find('.test1').text();
     alert(clickedValue);
   }
 );

Answer 2

您需要使用class或其他选择器来获取值，以获取每个锚点，

并使用this关键字获取当前上下文值

  var el = $('#dbg'); var HtmlData = LoadData(); el.html(HtmlData); function LoadData() { var dmJSON = "http://api.railwayapi.com/route/train/12728/apikey/3dacdecg/"; var html = '<div class="row s12"/>'; $.ajax({ url: dmJSON, dataType: 'json', async: false, data: {}, success: function(data) { $.each(data.route, function(key, value) { html += '<a id="click1" class="clickVal" href="#menu_modal">' + '<div class="card small">' + '<div align="center" id="rest_name">' + value.fullname + "</div>" + "</div>" + '</a>' + "</div>" }); } }); return html; } $(".clickVal").click( function() { var clickedValue = $(this).text(); alert(clickedValue); } ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="dbg"> </div> 

Answer 3

您可以尝试这样做，应该使用类选择而不是id。

   var el = $('#dbg');
   var HtmlData =   LoadData();
   el.html(HtmlData);


 function LoadData()
 {
 var dmJSON="http://api.railwayapi.com/route/train/12728/apikey/3dacdecg/";
 var html = '<div class="row s12"/>';
    $.ajax({
      url: dmJSON,
      dataType: 'json',
      async: false,
      data: {},
      success: function(data) {
      $.each(data.route, function(key, value) {    


      html += '<a id="" class="example" href="#menu_modal">' +      '<div  
      class="card small">' +'<div align="center" id=""   
      class="rest_example">' +     value.fullname + "</div>" + "</div>" + 
      '</a>' + "</div>"

            });

     }
  });
   return html;
  }


            $(".example").click(
        function () {
            var clickedValue = $(this).text();
            alert(clickedValue);
        }            
    );

Answer 4

看到这个http://jsfiddle.net/0qg9cu64/

您应该使用class＆ e.currentTarget