javascript - JQuery function only works within a function

Question

I have a page with a dropdown list and one of the options in ADD NEW. The function created for it works great.

$('#town_id').on('change', function(){
    if($(this).val() == "ADD_NEW"){
        console.log('Add New');
        $('#town_id').val('');
        $('#town_id').trigger('chosen:updated');
        $('#modal-1').modal('show');
    }
});

The problem is that sometimes the selectbox will not be on the page at all and I will append it into the page with jquery. This piece works too but the ADD NEW that was added from the jquery doesn't get picked up when running the code above. If I place the code above under the adding select code and then select ADD NEW in the dropdown it works ok.

// remove towns text
$('.towns').html('<select class="form-control chosen add_town" name="town_id" id="town_id" data-rule-required="true" data-placeholder="Choose a town"></select');
$("#town_id").chosen({disable_search_threshold: 15});
$("#town_id").css('width', '100%');


// add chosen select
$('#town_id').append('<option value="' + result.id + '" selected>' + result.name + '</option>');
$('#town_id').append('<option value="ADD_NEW">Add new town...</option>');
$('#town_id').trigger('chosen:updated');

Is there a way to make it work without duplicating the select code?

Answer 1

Yes there is a solution. You have to use delegation because the HTML element is created dynamically.

Considering the .towns element the container of the select box and #town_id the select box the syntax looks like this:

$('.towns').on('change', '#town_id', function(){
    if($(this).val() == "ADD_NEW"){
        console.log('Add New');
        $('#town_id').val('');
        $('#town_id').trigger('chosen:updated');
        $('#modal-1').modal('show');
    }
});

And yes, this will work for both static and dynamic select box.

---

Direct and delegated events

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. [...]

Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

Read more