Jquery/Javascript: How to get the clicked value in Jquery?

Question

I have a fiddle project here in which I want to get the clicked value for every value.full_name. But here it returns the alert for only the first value when I clicked on it. How can I return individual value?

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);
            }            
        );

use class id should be unique also use this context and to now the clicked element — guradio
– guradio, Commented Jan 31, 2017 at 8:25

4b0 · Accepted Answer · 2017-01-31 08:33:08Z

3

Working Fiddle

Use class instead of duplicate id.

Your Html with Class

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

and Jquery :

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

answered Jan 31, 2017 at 8:33

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hidayt Rahman · Accepted Answer · 2017-01-31 08:33:11Z

You need to get value using class or any other selector for get each anchor,

and use this keyword to get current context value

 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>

seval mutlu · Accepted Answer · 2017-01-31 08:33:41Z

You can try this, you should use class selection Instead of 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);
        }            
    );

Parth Ghiya · Accepted Answer · 2017-01-31 08:33:49Z

0

See this http://jsfiddle.net/0qg9cu64/

you should use class & e.currentTarget

answered Jan 31, 2017 at 8:33

Parth Ghiya

6,9692 gold badges32 silver badges37 bronze badges

Collectives™ on Stack Overflow

Jquery/Javascript: How to get the clicked value in Jquery?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related