jQuery选择动态元素

Question

I have dynamically created forms in my page. So once a checkbox in that form checked I want to post the form using jQuery. I still can't select the form correctly.

HTML code:

<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 code:

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

The alert message always says "undefined" and there are no errors in the console.

PHP code:

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

Just Try this and it should work:

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