jquery change() not working within hidden div

Question

I've been wondering and can't find a solution why the operation $("#locationid3").change (line 85) is not working even though it's the same as $("#locationid").change and $("#locationid2").change (the lines above it). The main difference is : - #locationid and #locationid2 is placed directly within the html-form and is always visible - #locationid3 is placed in a hidden div outside the html-form and will only be shown if "prod2" in product-dropdown is selected

the reason for creating a hidden div outside the form is so the fieldsets inside the form can be reloaded by changing the product-dropdown. By changing the product, all fieldset will be hidden with method "hideFieldsets()" and the corresponding fieldset (using account, product, data-id and data-position) will be shown with method "showFieldset()".

I've put the code in 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;

I would really appreciate any lead / advice on how to make #locationsid3 change() works. Thanx!

Answer 1

You are not simply doing show/hide on the #location3 select box. You are removing the html from the page and appending it again when prod2 is selected. You need to use .on method of jquery. Because it will fire the events bind with html loaded after dom creation.

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

Check this demo: Demo

Answer 2

Because your #locationid3 is dynamically changed, the normal selection won't work. You need to use the following format:

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

The #parent-element has to be static, so if you only has a static body, you can do $("body").on("change", "#find-this-element", function(){}). However, you should use the closest static element to improve performance.