获取按钮的id,点击for循环

时间:2017-01-06 05:54:38

标签: jquery

我有一个循环,其中我输出按钮作为数组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。

 $("#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,并在此处传递id以获取其HTML。

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

我也试过这个,但没有。我知道这不是一个好方法。

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

任何人都可以提出建议吗?

3 个答案:

答案 0 :(得分:3)

使用$(this)获取点击按钮的上下文:

click事件绑定到所有class共同的buttons个事件,如下所示

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

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

});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以在动态创建HTML时绑定onclick事件。

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

现在在jquery

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

答案 2 :(得分:0)

在td

中添加“get_time”类
  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();
});

希望它对你有用。