jQuery выбор динамических элементов

Question

У меня есть динамически созданные формы на моей странице. Поэтому, когда флажок в этой форме проверен, я хочу опубликовать форму с помощью jQuery. Я все еще не могу правильно выбрать форму.

HTML код:

<tbody> 
    <tr> 
     <form id="" class="recmndation"> 
      <td>sdfdsfdsfdsfsdfsdfsdfsd</td> 
      <td> 
       <input class="checkboxes" type="checkbox" name="Luxury Resorts" /> 
      </td> 
      <td> 
       <input class="checkboxes" type="checkbox" name="Honeymoon Resorts" /> 
      </td> 
      <td> 
       <input class="checkboxes" type="checkbox" name="Dive Resorts" /> 
      </td> 
      <td> 
       <input class="checkboxes" type="checkbox" name="Surf Resorts" /> 
      </td> 
      <td> 
       <input class="checkboxes" type="checkbox" name="Spa Resorts" /> 
      </td> 
      <td> 
       <input class="checkboxes" type="checkbox" name="Over-night Resorts" /> 
      </td> 
      <input type="hidden" name="hotel_id" value="2" /> 
     </form> 
    </tr> 
    <tr> 
     <form id="" class="recmndation"> 
      <td>tests</td> 
      <td> 
       <input class="checkboxes" type="checkbox" name="Luxury Resorts" /> 
      </td> 
      <td> 
       <input class="checkboxes" type="checkbox" name="Honeymoon Resorts" /> 
      </td> 
      <td> 
       <input class="checkboxes" type="checkbox" name="Dive Resorts" /> 
      </td> 
      <td> 
       <input class="checkboxes" type="checkbox" name="Surf Resorts" /> 
      </td> 
      <td> 
       <input class="checkboxes" type="checkbox" name="Spa Resorts" /> 
      </td> 
      <td> 
       <input class="checkboxes" type="checkbox" name="Over-night Resorts" /> 
      </td> 
      <input type="hidden" name="hotel_id" value="1" /> 
     </form> 
    </tr> 
</tbody> 

код JQuery:

<script> 
    $('.checkboxes').on('change', function() { 
     var val = $(this).parents('.recmndation').attr('id'); 
     alert(val); 
    }); 
</script> 

alert сообщение всегда говорит "не определено", и нет никаких ошибок в консоли.

PHP код:

<?php 
if (!empty($hotel_list)) { 
    foreach ($hotel_list as $htls) { 
     ?> 
     <tr> 
     <form id="<?php $htls->name ?>" class="recmndation"> 
     <td><?php echo $htls->name; ?></td> 
     <?php 
     if ($rcmnd_list) { 
      foreach ($rcmnd_list as $rcl) { 
       ?> 
       <td><input class="checkboxes" type="checkbox" name="<?php echo $rcl->rec_name; ?>" /></td> 
       <?php 
      } 
     } 
     ?> 
     <input type="hidden" name="hotel_id" value="<?php echo $htls->hotel_id; ?>" /> 
     </form> 
     </tr> 
     <?php 
    } 
} 
?> 

Answer 1

Просто попробуйте это, и это должно работать:

<script> 
$(document).ready(function(){ 
    $('.checkboxes').on('change', function() { 
     var val = $(this).closest('.recmndation').attr('id'); 
       OR YOU CAN USE PROP 
     var val = $(this).closest('.recmndation').prop('id'); 
     alert(val); 
    }); 
}); 
</script> 

Answer 2

Прежде всего,

1) Ваша форма ID пуста! так что вы получите только пустое предупреждение.

Во-вторых,

2) просьба представить <table> внутри <form> не наоборот.

Ваш формат код должен выглядеть так:

<form id="two" class="recmndation"> 

     <table> 
      <tr> 
       <td> 
       <td><input class="checkboxes" type="checkbox" name="Luxury Resorts" /></td> 
       <td><input class="checkboxes" type="checkbox" name="Honeymoon Resorts" /></td> 
       <td><input class="checkboxes" type="checkbox" name="Dive Resorts" /></td> 
       <td><input class="checkboxes" type="checkbox" name="Surf Resorts" /></td> 
       <td><input class="checkboxes" type="checkbox" name="Spa Resorts" /></td> 
       <td><input class="checkboxes" type="checkbox" name="Over-night Resorts" /></td> 
       <td><input type="hidden" name="hotel_id" value="1" /></td> 
      </tr> 
     </table> 
    </form> 



    <script> 
     $('.checkboxes').on('change', function() { 
      var val = $(this).parents('.recmndation').attr('id'); 
      alert(val); 
     }); 
    </script>