Question

在每一行中都有一个文本框和一个按钮，我想通过各自的文本框点击按钮获取文本数据。但是problam是我为每个按钮点击获得相同的值，因为textboxID是相同的......在循环中我的代码是这样的......有没有办法获得diff按钮的每个文本框的值

 <% @obj.each_with_index do |time_sheet, i| %>
   <tr>
     <td style="width:30px;"><input type="text" name="comment"  id='commentId'></td>
     <td class="table-styling"> <button type="button" id="waiver">Waiver</button></td>
   </tr>
  <% end %>


  $('#waiver').live("click", function() {
 var commentVal = $("#commentId").val();
 alert(commentVal); //getting same value for each button click

   });

Answer 1

$(document).on('click', '#waiver', function() {
   var commentVal = $(this).closest('tr').find("#commentId").val();
   console.log(commentVal);
});

当然，ID是独一无二的，看起来你是在循环中批量生成具有相同ID的元素，这不是一个好主意，并使javascript变得嘘声。

Answer 2

您正在创建大量具有相同id属性的元素。 id属性用于标识一个元素。没有了。

改为使用班级：

<% @obj.each_with_index do |time_sheet, i| %>
    <tr>
        <td style="width: 30px;">
            <input type="text" name="comment" class="comment" />
        </td>

        <td class="table-styling">
            <button type="button" class="waiver">Waiver</button>
        </td>
    </tr>
<% end %>

你的JS：

$(document).on('click', '.waiver', function() {
    var commentVal = $(this).closest('tr').find('.comment').val();
});

Answer 3

第一个重要的是ID应该是唯一的！

如果您想获取相应的文本框值，可以尝试将代码替换为类名而不是ID ，如下所示

<% @obj.each_with_index do |time_sheet, i| %>
 <tr>
 <td style="width:30px;">
   <input type="text" name="comment"  class='comment-textbox'>    </td>
 <td class="table-styling"> 
   <button type="button" class="btn-waiver">Waiver</button></td>
 </tr>

 $('.btn-waiver').live("click", function() {
 var commentVal =$(this).closest('tr').find('.comment-textbox').val();
     //or
 var commentVal = $(this).parents('tr:first').find('.comment-textbox').val();
 alert(commentVal); //getting same value for each button click

 });

点击事件没有得到jquery中文本框的值

3 个答案: