CODEWITHSUNDEEP
jquery
shahid hamdam
shahid hamdam

Reputation: 821

get id of button clicked in for loop

I have a loop in which i output buttons as the length of array valstime. 

   var html ='';
     for (var j=0, n=valstime.length; j<n; j++) 
      {
        html += ' <tr>';
        html += '  <td>'+'<button class="btn btn-default" value="'+(valstime[j])+'" id="time<?php echo $post->ID?>'+j+'">'+(valstime[j])+'</button>'+'</td>';
        html +=       '</tr>';
      }
   $("#times<?php echo $post->ID?>").append(html);

Now i want to get the html of button clicked. First i was using 

id="time<?php echo $post->ID?>"

and when i gets the html of button i gets only first because id must not be same, if it is same jquery will gets the first one only. So i done this.

id="time<?php echo $post->ID?>'+j+'"

Now the id is different for every button. I was getting html of button clicked by its id using this code.

 $("#time<?php echo $post->ID?>").click(function(){
   var ttime = $(this).html();
   console.log(ttime);
   var timestr=ttime;
   var time=new Date();        
   time.setHours(parseInt(timestr.split(":")[0])+1,00,00);
   var newtime= formatAMPM(time);
   $(".tt_time").val(ttime+' - '+newtime);
   $(".tt_time").html(ttime+' - '+newtime);

 });

Now i want to get the id of button that which one is clicked and pass the id here to get its html.

 $("#clicked ID here").click(function(){

i also tried this but nothing. I know its not a good approach.

for (var k=0; k<10; k++) 
                    {
 $("#time<?php echo $post->ID?>'+k+'").click(function(){

can anyone suggest something?

Upvotes: 0

Views: 4305

Answers (3)

Nitin Vaghani
Nitin Vaghani

Reputation: 307

Add "get_time" class in td

  var html ='';
     for (var j=0, n=valstime.length; j<n; j++) 
      {
        html += ' <tr>';
        html += '  <td>'+'<button class="btn btn-default get_time" value="'+(valstime[j])+'" id="time<?php echo $post->ID?>'+j+'">'+(valstime[j])+'</button>'+'</td>';
        html +=       '</tr>';
      }
   $("#times<?php echo $post->ID?>").append(html);


$(document).on('click','.get_time',function(){
   // you will get everything here
   console.log($(this).attr("id"));
   console.log($(this).text();
   console.log($(this).html();
});

Hope it's work for you.

Upvotes: 0

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

use $(this) to get the context of the button clicked:

Bind click event on a class common to all buttons like below

$(document).on("click", ".btn", function(){
     console.log($(this).attr("id"));
});


$(function() {
  $(document).on("click", ".btn", function() {
    alert($(this).attr("id"))
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn" id="btn1">Button 1</button>
<button class="btn" id="btn2">Button 2</button>
<button class="btn" id="btn3">Button 3</button>

Upvotes: 4

danish farhaj
danish farhaj

Reputation: 1354

You can bind onclick event while you are creating it's HTML dynamically.

html +=    '<td>'+'<button class="btn btn-default" value="'+(valstime[j])+'"
           onclick="GetPostID(time<?php echo $post->ID?>)"
           id="time<?php echo $post->ID?>'+j+'">'
           +(valstime[j])+'</button>'+'</td>';

Now in jquery 

function GetPostID(id) {
//here is your id
}

Upvotes: 0

Related Questions