forループでクリックされたボタンのidを取得

Question

私はループを持っています。出力ボタンは配列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); 

ここで、クリックしたhtmlのHTMLを取得したいと思います。まず私は

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

とするとき、私はそれが同じjqueryの意志が最初のものだけを取得している場合は、idは、同じであってはなりませんので、私は唯一の最初の取得ボタンのHTMLを取得を使用していました。だから私はこれをやった。

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

ここで、idはすべてのボタンで異なります。私は、このコードを使用してidによってクリックされたボタンのhtmlを取得していました。

$("#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); 

}); 

ここで、クリックしたボタンのIDを取得して、そのHTMLを取得するためにここにIDを渡したいとします。

私もこれを試しましたが、何もありませんでした。私はそれが良いアプローチではないことを知っています。

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

誰かが何かを提案できますか？ボタンのコンテキストを取得する

Answer 1

使用$(this)をクリック：あなたがバインドすることができ

$(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>

Answer 2

以下のようなすべてのbuttonsに共通class上

バインドclickイベントをあなたがHTML dを作成しているときにonclickイベントynamically。

jqueryの中に今

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>'; 

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

Answer 3

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

を "GET_TIME" クラスを追加し、それはあなたのための仕事だと思います。