JQuery change() динамически загруженная ошибка события

Question

Я пытаюсь подключить событие .change() к выпадающему полю выбора, используя JQuery. Код выглядит следующим образом:

<div id="productVariants" class="group"> 
    <label for="product-option">Rental Options :</label> 
    <select name="id" id="productSelect" style="visibility:hidden;width:400px;"> 
     <option disabled="disabled">3 Day Rental ($5.68 per day) ($17.05) - SOLD OUT</option> 
     <option value="801110989">7 Day Rental ($4.41 per day) ($30.85)</option> 
     <option value="894325197">10 Day Rental ($3.71 per day) ($37.12)</option> 
     <option value="894454745">14 Day Rental ($3.32 per day) ($46.44)</option> 
    </select> 
</div><!-- productVariants --> 

<script type="text/javascript"> 
    $("select") 
     .change(function() { 
      var str = ""; 
      $("select option:selected").each(function() { 
       alert('changed'); 
      }); 
     }) 
     .change(); 
</script> 

Событие срабатывает только один раз, когда страница загружается, а не когда я меняю выбранный элемент. Кто-нибудь знает, как запустить это событие при каждом изменении поля выбора?

Answer 1

Вам необходимо переместить этот блок JS внутрь события [$(document).ready()][1]. Это обеспечит готовность страницы (DOM) и зарегистрирует это событие с помощью вашего управления <select>. Таким образом, он будет срабатывать каждый раз, когда выбор изменится.

Я также рекомендую использовать селектор фактического управления $("#productSelect")), в отличие от кода, который у вас есть, который будет запускать это событие для каждые выбрать элемент управления. Это может быть логика, которую вы делаете, но вероятность того, что она специфична для управления, поэтому вы можете захватывать данные выбора, чтобы совершать последующие вызовы AJAX или что-то еще, что необходимо.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#productSelect").change(function() { 
      //Populate variable with the 'option value'  
      var selectValue = $(this).val(); 
      alert('select changed value selected is: ' + selectValue); 

     }); 
    }); 

</script> 

Answer 2

Попробуйте это:

$("#productSelect").change(function() { 
    var str = ""; 
    // To fetch value of selected option 
    str = $(this).val(); 

    alert('changed'); 

}); 

я удалил некоторые ненужные код.