Global variable scope with event handler for dynamically created element

Question

I want to change the behaviour of a Bootstrap dropdown based on a global state variable. If the uiState variable is 'normal' when it is clicked, it should display the dropdown, but if it's in another state it should do something else. I have the following code:

$(document).ready(function () {
    var uiState = 'normal';

    // Load HTML for word control from server
    var wordUiElement;
    $.get('/static/word_ui_element.html', function (data) {
        wordUiElement = data;
    });
   var nwords = 0;
   var testClickCounter = 0;

   // Make it so dropdowns are exclusively controlled via JavaScript
   $(document).off('.dropdown.data-api')

   $('#ui-add-word').click(function (event) {
       var control = wordUiElement.replace(/wx/g, 'w' + nwords.toString());
       $('#ui-spec').append(control);
       nwords++;
   });

   $('#ui-change-state').click(function (event) {
       if (uiState === 'word_select') {
           uiState = 'normal';
       } else {
           uiState = 'word_select';
       }
       console.log(uiState);
   });

    $('#ui-spec').on('click', '.dropdown .dropdown-toggle', function (event) {
        if (uiState === 'normal') {
            $(this).dropdown('toggle');
        }
        else {
            testClickCounter ++;
            console.log(testClickCounter);
        }
    });

});

However, when the dropdowns are dynamically created, their behaviour seems to be fixed based on what the uiState variable was when the dropdown was created.

This means that if a dropdown was created when the uiState variable was set to 'normal', no matter what uiState is when it's clicked, it will always show or hide the dropdown. On the other hand if the dropdown was created when uiState was 'word_select', it will always increment and log testClickCounter. It's as if the if statement in the handler is evaluated once when the dropdown is created and preserves whatever the value of uiState was when it was created.

I assume this is a scoping issue, and the event handler is executed when it's created. I want it to check at the time of the click what the value of uiState is, but I don't know how to fix it.

Maybe I don't get it, but I really don't get want you are trying to do there :) — misantronic
– misantronic, Commented Oct 28, 2015 at 11:05
They're based on the HTML data properties, post your HTML for the button. — Kriggs
– Kriggs, Commented Oct 28, 2015 at 11:09
Do you expect each dropdown to have its own state? Currently you have a global uiState variable for all of them! — Bergi
– Bergi, Commented Oct 28, 2015 at 11:19
No, they don't need their own state. I'll add the rest of the code — muskrat
– muskrat, Commented Oct 28, 2015 at 11:21

Kriggs · Accepted Answer · 2015-10-28 11:20:51Z

1

Instantiate the element with data-toggle="dropdown" and remove this property when it changes state, eg:

$('#wx').attr('data-toggle',''); // Dropdown no longer shows

or

$('#wx').attr('data-toggle','dropdown'); // Dropdown shows again

The rest of the trigger continue as usual:

$('#wx').on('click', '.dropdown .dropdown-toggle', function (event) {
    if (uiState !== 'normal') {
        testClickCounter ++;
        console.log(testClickCounter);
    }
});

edited Oct 28, 2015 at 11:20

answered Oct 28, 2015 at 11:14

Kriggs

3,7761 gold badge19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

muskrat Over a year ago

This does not address the problem. I've tried to explain it more clearly

Collectives™ on Stack Overflow

Global variable scope with event handler for dynamically created element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related