Событие из динамически используемого шаблона шаблона не запускается

Question

Мне нужно отобразить div по выбору пользователя: один, два или три. Если один выбран, только один div будет заполнен из шаблона основной линии. Если будут заполнены два, два div и три, будут заполнены три div. Первый заполняется на этапе инициализации базовой линии. Проблема в том, что элемент управления select из первого div, который загружается из шаблона на этапе инициализации, запускает событие изменения. Но другие два элемента управления div не срабатывают. Моя структура кода выглядит следующим образом:

<input type="radio" name="chooseRadio" value="1" checked="checked" /> Choose 1 
    <input type="radio" name="chooseRadio" value="2" /> Choose 2 
    <input type="radio" name="chooseRadio" value="3" /> Choose 3 
    <div id="locations"> 
     <div id="divLoc1"> 
     </div> 
     <div id="divLoc2"> 
     </div> 
     <div id="divLoc3"> 
     </div> 
    </div> 
    <script type="text/template" id="template1"> 
     <select id="select1" class="added-later"> 
      <option value="test1">test 1</option> 
      <option value="test2">rest 2</option> 
     </select> 
    </script> 
    <script type="text/javascript"> 
     $(function() { 
      var loc = Backbone.Model.extend({ 
       current: 1, 
       template: _.template($('#template1').html()), 
       events: { 
        'change #select1': 'onSelectChange' 
       }, 
       onSelectChange: function() { 
        alert('yes'); 
       }, 
       initialize: function() { 
        var loc1 = this.template(); 
        $('#divLoc1').html(loc1); 
        $(this.loc2).hide(); 
        $(this.loc3).hide(); 
       }, 
       maintainLocations: function() { 
        alert(this.current); 
        switch (this.current) { 
         case '1': 
          $('#divLoc2').hide(); 
          $('#divLoc3').hide(); 
          break; 
         case '2': 
          var loc1 = this.template(); 
          $('#divLoc2').html(loc1); 
          $('#divLoc2').show(); 
          $('#divLoc3').hide(); 
          break; 
         case '3': 
          var loc1 = this.template(); 
          $('#divLoc2').html(loc1); 
          $('#divLoc3').html(loc1); 
          $('#divLoc2').show(); 
          $('#divLoc3').show(); 
          break; 
        } 
       } 
      }); 
      var appView = new loc(); 

      $('input[name=chooseRadio]').click(function() { 
       var val = $(this).val(); 
       appView.current = val; 
       appView.maintainLocations(); 
      }); 

      $('#select1').change(function() { 
       alert('fired!'); 
      }); 
     }); 

    </script> 

Я использую магистраль 1.1.2. Любая идея, пожалуйста?

Answer 1

Возможно, это происходит потому, что когда вы подключаете обработчик событий jquery, он подключает обработчик только к существующим элементам внутри DOM.

Для каждого нового элемента DOM, который вы вставляете [или вставлен], вы должны повторно активировать код проводки обработчика события.

См., Например,

function wireUpHandlers() { 

     $('input[name=chooseRadio]').click(function() { 
        var val = $(this).val(); 
        appView.current = val; 
        appView.maintainLocations(); 
       }); 

       $('#select1').change(function() { 
        alert('fired!'); 
       }); 


    } 

    $(document).ready(function() { 
     wireUpHandlers(); 
    }); 

Теперь, когда вы добавляете новый HTML в свою страницу, вызовите wireUpHandlers() снова и обработчики будут работать для новых элементов, добавленных слишком.