复制警报

Question

我的代码有问题，我无法弄清楚如何解决这个问题。

工作原理：

1. 在复选框“test1”中键入内容并单击某处。提示您的文字将显示。
2. 然后转到“test2”并做同样的事情。输入内容并单击某处。警报将出现。
3. 然后agin转到“test1”并做同样的事情。输入内容并单击某处。这是我的问题。您将看到两个警报而不是一个。

为什么会这样？如果每次重复此操作，您将再看到一个警报。

<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<select id="type">
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

<form id="order_form">
    <div data-id="1" class="hide">
        <p>Test 1</p>
        <input type="text" name="test1">
    </div>

    <div data-id="2" class="hide">
        <p>Test 2</p>
        <input type="text" name="test2">
    </div>

    <div data-id="3" class="hide">
        <p>Test 3</p>
        <input type="text" name="test3">
    </div>
</form>




<script type="text/javascript">
    $('#type').change(function () {
        $('.hide').hide();
        $('[data-id=' + $(this).val() + ']').show();
        $('#order_form')[0].reset();

        $product = ~~$('#type').val();

        $('input[name="test'+$product+'"]').change(function(e) {
            $test = $('input[name="test'+$product+'"]').val();

            alert($test);
        })


    }).trigger('change');

</script>

Answer 1

这样的事情？正如其他人在关于事件绑定的评论中所说的那样，绑定是分开的，因此没有多个调用。另外，您可以在change上调用input[type=text]，而不是在特定输入上调用$(document).ready(function() { $('#type').on('change', function () { $('.hide').hide(); $('[data-id=' + $(this).val() + ']').show(); $('#order_form')[0].reset(); }); $('input[type=text]').change(function(e) { $product = $('#type').val(); $test = $('input[name="test'+$product+'"]').val(); alert($test); }); $('#type').trigger('change'); });，因为一次只能显示一个。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="type">
    <option value="1">Test 1</option>
    <option value="2">Test 2</option>
    <option value="3">Test 3</option>
</select>

<form id="order_form">
    <div data-id="1" class="hide">
        <p>Test 1</p>
        <input type="text" name="test1"/>
    </div>

    <div data-id="2" class="hide">
        <p>Test 2</p>
        <input type="text" name="test2"/>
    </div>

    <div data-id="3" class="hide">
        <p>Test 3</p>
        <input type="text" name="test3"/>
    </div>
</form>

{{1}}