jQuery change() не работает в скрытом div

Question

Мне было интересно и не удалось найти решение, почему операция $ ("# locationid3"). Change (строка 85) не работает, хотя это то же самое, что и $ ("# locationid"). change и $ ("# locationid2"). изменить (строки над ним). Основное отличие: - #locationid и # locationid2 размещены непосредственно в html-форме и всегда видны - # locationid3 помещается в скрытый div вне html-формы и будет отображаться только в том случае, если "prod2" в продукте -dropdown

Причина создания скрытого div вне формы заключается в том, что поля в форме можно перезагрузить, изменив выпадающее меню. Изменяя продукт, весь набор полей будет скрыт с помощью метода «hideFieldsets()», и соответствующий набор полей (с использованием учетной записи, продукта, идентификатора данных и позиции данных) будет показан с помощью метода «showFieldset()».

Я поставил код в jsfiddle

$(document).ready(function(){ 
     $("#accountid").change(function() { 
      var $dropdown = $(this); 
      var accounts = { 
       "id_1":{"products":[{"id":"1","val":"prod1"},{"id":"2","val":"prod2"}],"locations":[{"id":"4","val":"loc1"},{"id":"1","val":"loc2"}],} 

       }; 


      var key = $dropdown.val(); 
      var products = {}; 
      var locations = {}; 
      var locations2 = {}; 
      var locations3 = {}; 
      switch(key) { 
       case 'id_1' :products = accounts.id_1.products;locations = accounts.id_1.locations;locations2 = locations;locations3 = locations;break; 


      } 


      var $productid = $("#productid"); 
      $productid.empty(); 
      $.each(products, function(index, value) { 
      var option = $('<option></option>').val(value.id).text(value.val); 
      $productid.append(option); 

      }); 

      $('#productid').val(); 
      $productid.trigger("change"); 

      var $locationid = $("#locationid"); 
      $locationid.empty(); 
      $.each(locations, function(index, value) { 
      var option = $('<option></option>').val(value.id).text(value.val); 
      $locationid.append(option); 

      }); 


      var $locationid2 = $("#locationid2"); 
      $locationid2.empty(); 
      $.each(locations2, function(index, value) { 
      var option = $('<option></option>').val(value.id).text(value.val); 
      $locationid2.append(option); 

      }); 


      var $locationid3 = $("#locationid3"); 
      $locationid3.empty(); 
      $.each(locations3, function(index, value) { 
      var option = $('<option></option>').val(value.id).text(value.val); 
      $locationid3.append(option); 

      }); 


     }); 



    $("#productid").change(function() { 
     var possibleFieldsets = { 

     "id_1_1" : ["id_1_1__ test ","id_1_1__ test2 "], 
     "id_1_2" : ["id_1_2__ test ","id_1_2__ test2 "], 
     }; 

     hideFieldsets(); 
     var selectedAccProd = $("#accountid option:selected").val()+"_"+$("#productid option:selected").val(); 
     showFieldsets(possibleFieldsets[selectedAccProd]); 

    }); 

     $("#locationid").change(function() { 
      readLocationData(this.value); 
     }); 

     $("#locationid2").change(function() { 
      readLocationData(this.value); 
     }); 

     $("#locationid3").change(function() { 
      readLocationData(this.value); 
     }); 

     var allFieldset = {}; 
     $('#allFieldsets').children().each(function(index,fieldsetElement){ 
      var $fieldsetElement = $(fieldsetElement); 
      allFieldset[$fieldsetElement.attr("data-id")] = $fieldsetElement; 
     }); 
     $('#allFieldsets').remove(); 


     function hideFieldsets(){ 

      for(var key in allFieldset){ 
       var $div = $('fieldset[data-id="'+key+'"]').parent(); 
       if($div.children().length > 0){ 
        allFieldset[key] = $div.children(); 
        $div.empty(); 
       } 
       $div.hide(); 
      } 
     } 

     function showFieldsets(fieldsetArray){ 
      $.each(fieldsetArray, function(index, element){ 
       var $div = $('div[data-position="'+element.split('__')[1]+'"]'); 
       $div.append(allFieldset[element]); 
       $div.show(); 

      }); 

     } 
     function readOrderData(orderId){ 
      window.alert("reading data"); 
     } 



     function readLocationData(locationId){ 
      window.alert("location changed"); 
     } 

     $("#accountid").trigger("change"); 
     }); 

     $isUnread = false; 

Я бы очень признателен за любые свинцовые/советы о том, как внести изменения # locationsid3() работаю. Thanx!

Answer 1

Вы не просто показываете/скрываете в поле выбора # location3. Вы удаляете html со страницы и добавляете его снова при выборе prod2. Вам нужно использовать .on метод jquery. Потому что это приведет к тому, что события свяжутся с html, загруженным после создания dom.

$('body').on('change','#locationid3',function(){ 
    readLocationData(this.value); 
}); 

Проверить это демо: Demo

Answer 2

Поскольку ваш #locationid3 динамически изменен, нормальный выбор не будет работать. Вы должны использовать следующий формат:

$("#parent-element").on("change", "#find-this-element", function(){}) 

#parent-element должен быть статическими, так что если вы только имеете статический body, вы можете сделать $("body").on("change", "#find-this-element", function(){}). Однако для повышения производительности вы должны использовать ближайший статический элемент.

Answer 3

Вы должны делегировать change событие для родительского элемента. Это необходимо, поскольку, когда событие привязано к document.ready, выпадающий список 3 будет скрыт в DOM и показан только позже.

$(document).ready(function() { 
 
    $("#accountid").change(function() { 
 
    var $dropdown = $(this); 
 
    var accounts = { 
 
     "id_1": { 
 
     "products": [{ 
 
      "id": "1", 
 
      "val": "prod1" 
 
     }, { 
 
      "id": "2", 
 
      "val": "prod2" 
 
     }], 
 
     "locations": [{ 
 
      "id": "4", 
 
      "val": "loc1" 
 
     }, { 
 
      "id": "1", 
 
      "val": "loc2" 
 
     }], 
 
     } 
 

 
    }; 
 

 

 
    var key = $dropdown.val(); 
 
    var products = {}; 
 
    var locations = {}; 
 
    var locations2 = {}; 
 
    var locations3 = {}; 
 
    switch (key) { 
 
     case 'id_1': 
 
     products = accounts.id_1.products; 
 
     locations = accounts.id_1.locations; 
 
     locations2 = locations; 
 
     locations3 = locations; 
 
     break; 
 

 

 
    } 
 

 

 
    var $productid = $("#productid"); 
 
    $productid.empty(); 
 
    $.each(products, function(index, value) { 
 
     var option = $('<option></option>').val(value.id).text(value.val); 
 
     $productid.append(option); 
 

 
    }); 
 

 
    $('#productid').val(); 
 
    $productid.trigger("change"); 
 

 
    var $locationid = $("#locationid"); 
 
    $locationid.empty(); 
 
    $.each(locations, function(index, value) { 
 
     var option = $('<option></option>').val(value.id).text(value.val); 
 
     $locationid.append(option); 
 

 
    }); 
 

 

 
    var $locationid2 = $("#locationid2"); 
 
    $locationid2.empty(); 
 
    $.each(locations2, function(index, value) { 
 
     var option = $('<option></option>').val(value.id).text(value.val); 
 
     $locationid2.append(option); 
 

 
    }); 
 

 

 
    var $locationid3 = $("#locationid3"); 
 
    $locationid3.empty(); 
 
    $.each(locations3, function(index, value) { 
 
     var option = $('<option></option>').val(value.id).text(value.val); 
 
     $locationid3.append(option); 
 

 
    }); 
 

 

 
    }); 
 

 

 

 
    $("#productid").change(function() { 
 
    var possibleFieldsets = { 
 

 
     "id_1_1": ["id_1_1__ test ", "id_1_1__ test2 "], 
 
     "id_1_2": ["id_1_2__ test ", "id_1_2__ test2 "], 
 
    }; 
 

 
    hideFieldsets(); 
 
    var selectedAccProd = $("#accountid option:selected").val() + "_" + $("#productid option:selected").val(); 
 
    showFieldsets(possibleFieldsets[selectedAccProd]); 
 

 
    }); 
 

 
    $("#locationid").change(function() { 
 

 
    readLocationData(this.value); 
 
    }); 
 

 
    $("#locationid2").change(function() { 
 

 
    readLocationData(this.value); 
 
    }); 
 

 
    $(document).on("change", "#locationid3", function() { 
 
    console.log("here"); 
 
    readLocationData(this.value); 
 
    }); 
 

 
    var allFieldset = {}; 
 
    $('#allFieldsets').children().each(function(index, fieldsetElement) { 
 
    var $fieldsetElement = $(fieldsetElement); 
 
    allFieldset[$fieldsetElement.attr("data-id")] = $fieldsetElement; 
 
    }); 
 
    $('#allFieldsets').remove(); 
 

 

 
    function hideFieldsets() { 
 

 
    for (var key in allFieldset) { 
 
     var $div = $('fieldset[data-id="' + key + '"]').parent(); 
 
     if ($div.children().length > 0) { 
 
     allFieldset[key] = $div.children(); 
 
     $div.empty(); 
 
     } 
 
     $div.hide(); 
 
    } 
 
    } 
 

 
    function showFieldsets(fieldsetArray) { 
 
    $.each(fieldsetArray, function(index, element) { 
 
     var $div = $('div[data-position="' + element.split('__')[1] + '"]'); 
 
     $div.append(allFieldset[element]); 
 
     $div.show(); 
 

 
    }); 
 

 
    } 
 

 
    function readOrderData(orderId) { 
 
    window.alert("reading data"); 
 
    } 
 

 

 

 
    function readLocationData(locationId) { 
 
    window.alert("location changed"); 
 
    } 
 

 
    $("#accountid").trigger("change"); 
 
}); 
 

 
$isUnread = false;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="" id="orderForm" method="POST" enctype="multipart/form-data"> 
 
    <fieldset data-id="admin"> 
 
    <legend>Admin</legend> 
 
    <table> 
 
     <tr> 
 
     <td> 
 
      <label for="accountid">Kunde:</label> 
 
     </td> 
 
     <td> 
 
      <select id="accountid" name="accountid"> 
 
      <option value="id_1">acc1</option> 
 
     </td> 
 
     <td></td> 
 
     <td></td> 
 
     <td> 
 
      <label for="productid">Produkt:</label> 
 
     </td> 
 
     <td> 
 
      <select id="productid" name="productid"> 
 
      <option value="1">prod1</option> 
 
      <option value="2">prod2</option> 
 
      </select> 
 
     </td> 
 

 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="locationid">Standort:</label> 
 
     </td> 
 
     <td> 
 
      <select id="locationid" name="locationid"> 
 
      <option value="4">loc1</option> 
 
      <option value="1">loc2</option> 
 
      </select> 
 
     </td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 

 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <label for="locationid2">Standort2:</label> 
 
     </td> 
 
     <td> 
 
      <select id="locationid2" name="locationid2"> 
 
      <option value="4">loc1</option> 
 
      <option value="1">loc2</option> 
 
      </select> 
 
     </td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 
     <td></td> 
 

 
     </tr> 
 
    </table> 
 
    </fieldset> 
 
    <div data-position=" test "></div> 
 
    <div data-position=" test2 "></div> 
 

 

 
    <hr> 
 
</form> 
 
<div style="display:none; width:0px; height:0px; position:absolute; top:-1px; left:-1px" id="allFieldsets"> 
 
    <fieldset data-id="id_1_1__ test " data-position=" test "> 
 
    <legend>test</legend> 
 
    <div> 
 
     <table> 
 
     <tr> 
 
      <td> 
 
      <label for="registrationnumber">test111</label> 
 
      </td> 
 

 
     </tr> 
 

 
     </table> 
 
    </div> 
 
    </fieldset> 
 
    <fieldset data-id="id_1_1__ test2 " data-position=" test2 "> 
 
    <legend>test2</legend> 
 
    <div> 
 
     <table> 
 
     <tr> 
 
      <td> 
 
      <label for="appointmentdate">test112</label> 
 
      </td> 
 

 
     </tr> 
 

 
     </table> 
 
    </div> 
 
    </fieldset> 
 
    <fieldset data-id="id_1_2__ test " data-position=" test "> 
 
    <legend>test</legend> 
 
    <div> 
 
     <table> 
 
     <tr> 
 
      <td> 
 
      <label for="registrationnumber">test121</label> 
 
      </td> 
 

 
     </tr> 
 

 
     </table> 
 
    </div> 
 
    </fieldset> 
 
    <fieldset data-id="id_1_2__ test2 " data-position=" test2 "> 
 
    <legend>test2</legend> 
 
    <div> 
 
     <table> 
 
     <tr> 
 
      <td> 
 
      <label for="appointmentdate">test122</label> 
 
      </td> 
 

 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <label for="locationid3">Standort3:</label> 
 
      </td> 
 
      <td> 
 
      <select id="locationid3" name="locationid3"> 
 
       <option value="4">loc1</option> 
 
       <option value="1">loc2</option> 
 
      </select> 
 
      </td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 

 
     </tr> 
 
     </table> 
 
    </div> 
 
    </fieldset> 
 

 
</div>