複製警報

Question

我的代碼有問題，我無法弄清楚如何解決這個問題。

工作原理：

1. 類型的東西在勾選 「測試1」，然後單擊某處。將顯示您的文字提示。
2. 然後轉到「test2」並執行相同的操作。輸入內容並點擊某處。警報將會出現。
3. 然後agin去「測試1」並做同樣的事情。輸入內容並點擊某處。這是我的問題。你會看到兩個警報，而不是一個。

爲什麼會發生這種情況？如果您每次重複此操作，都會看到更多警報​​。

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