jQuery: Executes properly after second call

jQuery: Executes properly after second call

In this code: 
        $('#modal-action-store').on('shown.bs.modal', function () {
            if (wasclicked == 1) {
                var items = "<option value='0'>-- Seleccione Distrito --</option>";
                $('#DistrictID').html(items);
The query defines the variable items and then it will try to assign that value to the #DistrictID element.

The problem:

The first time the modal window is opened the code does not execute properly.

This happens, I think, because the code is executing when the modal opens but before the elements are loaded, thus, the query is trying to assign the value of items to an element that does not exists yet (#DistrictID) and for that, field will be shown as empty.

After the modal is closed and opened again, it works properly. It's like it storaged that a #DistrictID element exists and executes well for the second time and forward.

What I described is what happens in local. However, when the project is online it simply does not do that storage of the variable and never executes properly, which is expected since that 'magical' storage/remember of the #DistrictID that is happening on local it's odd. I believe what would be normal is that it fails everytime like the online version does.