Python/Jquery/Ajax Cascading dropdown

I am trying to setup a cascading dropdown with python/jquery/ajax.

The first dropdown is manually setup in the html code.

The second/third dropdowns are dependent on the previous selections.

When I select the first dropdown i am able to populate the second dropdown with the data through the ajax call. The issue is with the second -. 3rd dropdown.

The call does not come from the client at all. the html code genrate seems to be correct as firebug gives the correct output. I am thinking is that the client is not being refreshed to enable the new dynamic content to be used with the jquery which is already loaded.

I haven't added my python code as for the second -> dropdown the call doesn't even leave the client so I don't think this is the issue.

Will add it if needed though.

I have looked and looked for examples and have seen some similar results but nothing fruitful

Any help appreciated.

jquery:

$(document).ready(function(){

        $(".dynamic-select").change(function(){
            var url_params = '?' + $(this).attr('name') + '=' + $(this).val() + '&sid=' + $(this).attr('id');
            $.getJSON('ajax' + url_params,function(data) {

                $("#"+ data.element_id).replaceWith(data.data);




    });

        });
    });

html snippet

            <select class="dynamic-select" id="test1" name="test1">
                <option value="#">Select</option>
                <option value="EU">Europe</option>
                <option value="NA">North America</option>
                <option value="AS">Asia</option>
            </select>


            <select class="dynamic-select" id="test2" name="test2">
                <option value="#">Select First Dropdown</option>
            </select>

            <select class="dynamic-select" id="test3" name="test3">
                <option value="#">Select Second Dropdown</option>
            </select>

firebug html output after selecting EU from first dropdown

<select id="test1" class="dynamic-select" name="test1">
<option value="#">Select</option>
<option value="EU">Europe</option>
<option value="NA">North America</option>
<option value="AS">Asia</option>
</select>
<select id="test2" class="dynamic-select" name="test2">
<option value="#">Select EU</option>
<option value="EU_EQ_JA">EU_EQ_JA</option>
<option value="EU_CR_AR">EU_CR_AR</option>
<option value="EU_EQ_MC">EU_EQ_MC</option>
<option value="EU_EQ_CS">EU_EQ_CS</option>
<option value="EU_EQ_CR">EU_EQ_CR</option>
<option value="EU_CR_GS">EU_CR_GS</option>
</select>
<select id="test3" class="dynamic-select" name="test3">
<option value="#">Select Second Dropdown</option>
</select>

Solution

So I believe your problem is with the $(".dynamic-select").change(). That, just like bind and a couple other event triggers in JQuery, have to be set again as each element is added.

If you use

$("body").on('change','.dynamic-select',function(e){//some stuff here});

instead it should work for all elements inserted into the DOM.