jquery change（）在隐藏的div中不起作用

Question

我一直想知道并且找不到解决方案为什么操作 $("#locationid3").change（第 85 行）不起作用，即使它与 $("#locationid").change 和 $("#locationid2").change （它上面的行）。主要区别在于： - #locationid 和 #locationid2 直接放置在 html-form 中并且始终可见 - #locationid3 放置在 html-form 之外的隐藏 div 中，只有在 product-dropdown 中选择“prod2”时才会显示

在表单外创建隐藏 div 的原因是可以通过更改产品下拉菜单重新加载表单内的字段集。通过更改产品，所有字段集将使用“hideFieldsets()”方法隐藏，相应的字段集（使用帐户、产品、data-id 和数据位置）将使用“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 change() 起作用的任何线索/建议。谢谢！

Answer 1

因为您的#locationid3 是动态更改的，所以正常选择不起作用。您需要使用以下格式：

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

#parent-element 必须是静态的，所以如果你只有一个静态的body，你可以做$("body").on("change", "#find-this-element", function(){})。但是，您应该使用最接近的静态元素来提高性能。

Answer 2

您不只是在#location3 选择框上进行显示/隐藏。您正在从页面中删除 html 并在选择 prod2 时再次附加它。您需要使用 jquery 的 .on 方法。因为它会触发事件与 dom 创建后加载的 html 绑定。

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

查看此演示：Demo

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>