Question

I have the next 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>

And I want to get the ID from the class selector with jquery. For that I used the code:

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

The problem is that it shows the ID in console only when I change the first select. If I change the 2nd or 3rd select it doesn't show anything. How can I take the ID for every select?

EDIT

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

I've created a code snippet with all my code and it doesn't work. Mybe someone can tell me where is the problem. Thank you!

Answer 1

你需要尝试

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

而不是

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

有关详细说明，请查看Event binding on dynamically created elements?

Answer 2

这有用吗？

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

或者也许这......

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

Answer 3

而不是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>

Get id from class selector from input type select with jQuery

3 个答案: