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>

Answer 2

First of all,

1) your form id is empty! so, you will get only empty in alert.

Second of all,

2) please provide <table> inside <form> not the other way around.

Your code format should be like this:

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