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을 가져오고 싶습니다. 우선은

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

을 사용하고 있었고, 난 버튼의 HTML을 얻을 때 ID가 동일하지 않을해야하기 때문에이 같은 JQuery와 의지는 첫 번째를 얻을 수 있다면 나는 단지 첫번째 가져옵니다. 그래서 나는 이것을했다.

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

이제 id는 모든 버튼마다 다릅니다. 나는이 코드를 사용하여 그 id에 의해 클릭 된 html 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을 가져 오려고합니다.

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

나는 또한 이것을 시도했지만 아무 것도. 나는 좋은 접근법이 아니라는 것을 안다.

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

누군가가 제안 할 수 있습니까? 버튼의 컨텍스트를 얻을

Answer 1

사용 $(this)은 클릭 :

바인딩 click 이벤트를 class 일반적인 모든 buttons에 아래

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

당신은 바인딩 할 수 있습니다 HTML을 만드는 동안 onclick 이벤트 ynamically.

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

TD

에서 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

추가 "get_time"클래스는 당신을위한 작업입니다 바랍니다.