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

Question

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

appointmentId当我单击一个按钮时，我正在努力获取jQuery 函数。你能给我一个提示吗？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) 获取单击事件的上下文。然后它沿着 DOM 树向上移动到您的根表行元素并按名称选择子元素。这可确保您始终位于正确的行中。

编辑：我知道你已经选择了一个答案，但这真的让我很困扰，因为它不能正常工作。尽管您也可以使用 .find('input[name="appointmentId"]')，但我不得不使用 .children() 向下走两次才能使其正常工作。即使您已经选择了答案，我希望这会对您有所帮助。

$('.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);

});