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

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'时创建'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);
    }
});