javascript - 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>