Question

我有一张满是约会的桌子。每个约会都有两个按钮。一个用于取消事件，一个用于接受事件。

当我点击按钮时，我很难在jQuery函数中获得appointmentId。你能给我一个提示怎么做吗？ appointmentId在表中作为隐藏输入字段。

// my html code
<tr>
  <td align="left">
     <input type="hidden" name="appointmentId" value="234">
     John Smith - 14.03.2013 at 9 o'clock
  </td>
  <td align="right">
    <input type="button" id="acceptEvent" class="acceptEvent" value="Accept">
    <input type="button" id="cancelEvent" class="cancelEvent" value="Cancel">
  </td>
</tr>

// my jQuery code
$("body").delegate('.acceptEvent', 'click', function() {  
    console.log('accept event clicked');

    // get the appointmentId here

});

$("body").delegate('.cancelEvent', 'click', function() {  
    console.log('cancel event clicked');

    // get the appointmentId here
});

Answer 1

使用最接近抓取父tr元素，然后选择隐藏字段。这是正确答案的原因是因为它使用$（this）获取click事件的上下文。然后它将DOM树向上移动到根表行元素并按名称选择子元素。这可确保您始终处于正确的行中。

编辑：我知道你已经选择了一个答案，但这真的让我感到烦恼，因为它无法正常工作。我不得不使用.children（）走两次才能使它工作，尽管你也可以使用.find（'input [name =“appointmentId”]'）。即使您已经选择了答案，我希望这会对您有所帮助。

$('.acceptEvent').click(function() {
    var myVal = $(this).closest('tr').children().children().val();
}); 

$('.cancelEvent').click(function() {
    var myVal = $(this).closest('tr').children().children().val();
});

Answer 2

假设您没有其他ID或类可以关闭，您可以使用jQuery的Attribute Equals Selector来引用所单击按钮的父tr元素：

$('.acceptEvent').click(function() {
    // get the appointmentId here
    var appointmentId = $(this).closest('tr').find('input[name="appointmentId"]').val();
});

Answer 3

在click功能中，您可以访问使用this点击的按钮，以便执行以下操作：

$("body").on('click', '.cancelEvent', function() { 
     var input = $(this).closest('tr').find('input[name="appointmentId"]').val();
 });

Answer 4

我会这样做：

$("body").on('.acceptEvent', 'click', function() {  

    var id = $('input[name="appointmentId"]').val();
    //Or search in the parent <tr> 
    var id = $(this).parent().find('input[name="appointmentId"]').val();

    console.log('accept event clicked');

    console.log('Id is ' + id);

});

单击按钮时使用jQuery获取字段

4 个答案: