CODEWITHSUNDEEP
javascriptjqueryhtml
sumanth
sumanth

Reputation: 781

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

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

Upvotes: 1

Views: 161

Answers (4)

Parth Ghiya
Parth Ghiya

Reputation: 6949

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

you should use class & e.currentTarget

Upvotes: 0

seval mutlu
seval mutlu

Reputation: 1

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

Upvotes: 0

Hidayt Rahman
Hidayt Rahman

Reputation: 2680

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>

Upvotes: 0

4b0
4b0

Reputation: 22323

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

Upvotes: 3

Related Questions