从 class select 或从输入类型 select 和 jQuery 获取 ID

Question

我有下一个html:

<select class="input-types" id="input-type-1" name="input-type-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select class="input-types" id="input-type-2" name="input-type-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select class="input-types" id="input-type-3" name="input-type-3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

我想从 class select 或 jquery 获取 ID。为此，我使用了代码：

$('.input-types').change(function(){
    console.log(this.id);
});

问题是它仅在我更改第一个 select 时才在控制台中显示 ID。如果我更改第二个或第三个 select 它不会显示任何内容。如何获取每个 select 的 ID？

编辑

<html>
    <head>
        <title>Forms Generator</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <style>
            .default-value{
                display: none;
            }
        </style>
    </head>
    <body>
        <form method="POST" action="" id="create-form">
            <div class="fields">
                <div id="clone-1">
                    <h3 id="field-title">Field 1</h3>
                    <div class="input-type">
                        <label for="input-type-1">Input Type</label><br>
                        <select class="input-types" id="input-type-1" name="input-type-1">
                            <option value="">Select an Option</option>
                            <option value="text">Text</option>
                            <option value="select">Select</option>
                            <option value="checkbox">Checkbox</option>
                            <option value="radio">Radio</option>
                            <option value="password">Password</option>
                            <option value="textarea">Textarea</option>
                            <option value="submit">Submit Button</option>
                            <option value="hidden">Hidden</option>
                        </select><br><br>
                    </div>
                    <div class="label">
                        <label for="label-1">Label</label><br>
                        <input type="text" name="label-1" id="label-1"><br><br>
                    </div>
                    <div class="default-value">
                        <label for="default-value-1">Default Value</label><br>
                        <input type="text" name="default-value-1" id="default-value-1"><br><br>
                    </div>
                    <hr>
                </div>
            </div>
            <input type="submit" value="Create">
        </form>
        <a href="#" id="new-field">Camp Nou</a>
        <script>
            $(document).ready(function(){
                var index = 2;
                $('#new-field').click(function(){
                    var $div = $('div[id^="clone"]:last');
                    var $clone = $div.clone().prop('id', 'clone-'+index );
                    $div.after( $clone );

                    var $inputType = $('select[id^="input-type"]:last');
                    $inputType.prop('id', 'input-type-'+index );
                    $inputType.prop('name', 'input-type-'+index );

                    var $label = $('input[id^="label"]:last');
                    $label.prop('id', 'label-'+index );
                    $label.prop('name', 'label-'+index );

                    var $defaultValue = $('input[id^="default-value"]:last');
                    $defaultValue.prop('id', 'default-value-'+index );
                    $defaultValue.prop('name', 'default-value-'+index );

                    var $title = $('h3[id^="field-title"]:last');
                    $title.text('Field '+index)
                    index++;
                });

                $('.input-types').on('change', function(){
                    console.log(this.id);
                    /*if($('.input-types').val() == 'text' || $('.input-types').val() == 'textarea' || $('.input-types').val() == 'hidden' || $('.input-types').val() == 'submit') {
                        $('.default-value').show();
                    } else {
                        $('.default-value').hide();
                    }*/
                });
            });
        </script>
    </body>
</html>

我用我的所有代码创建了一个代码片段，但它不起作用。也许有人可以告诉我问题出在哪里。谢谢！

Answer 1

这个有用吗？

$('.input-types').change(function(event){
    console.log(event.target.id);
});

或者这...

$('.input-types').change(function(){
    console.log($(this).attr('id'));
});

Answer 2

而不是change，您需要使用on('change', function()

$('.input-types').on('change', function() {
  console.log(this.id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="input-types" id="input-type-1" name="input-type-1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select class="input-types" id="input-type-2" name="input-type-2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<select class="input-types" id="input-type-3" name="input-type-3">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

Answer 3

你需要试试

$(document).on('change','.input-types', function(){

而不是

$('.input-types').change(function(){

更多解释你可以看看Event binding on dynamically created elements?

从 class select 或从输入类型 select 和 jQuery 获取 ID

Get id from class selector from input type select with jQuery

jquery

jquery-selectors