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

Global variable scope with event handler for dynamically created element

本文关键字：事件处理 程序 全局变量 范围 元素 动态 创建      更新时间：2023-09-26

我想根据全局状态变量更改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的值是多少，但我不知道如何修复它。

用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);
    }
});
相关文章：