具有动态创建元素的事件处理程序的全局变量范围

Question

我想根据全局状态变量更改 Bootstrap 下拉菜单的行为。如果uiState 变量在单击时是'normal'，它应该显示下拉菜单，但如果它处于另一个状态，它应该做其他事情。我有以下代码：

$(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);
        }
    });

});

但是，当下拉列表被动态创建时，它们的行为似乎是基于创建下拉列表时uiState 变量的内容而固定的。

这意味着如果在将uiState 变量设置为'normal' 时创建了一个下拉列表，那么无论单击它时uiState 是什么，它都将始终显示或隐藏下拉列表。另一方面，如果下拉列表是在uiState 为'word_select' 时创建的，它将始终递增并记录testClickCounter。就好像处理程序中的 if 语句在创建下拉列表时被评估一次，并保留 uiState 的值在创建时的任何值。

我认为这是一个范围问题，并且事件处理程序在创建时执行。我希望它在单击时检查uiState 的值是什么，但我不知道如何解决。

Answer 1

用data-toggle="dropdown" 实例化元素，并在它改变状态时删除该属性，例如：

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

或

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

触发器的其余部分照常继续：

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