javascript - 将元素从一个监听器传递到嵌套监听器

Question

当单击按钮时，监听器会触发并打开一个模式，我需要从单击的按钮获取信息，以便将其传递到监听器中，这些监听器会在模式内发生某些情况时触发。

我的 JavaScript:

$('li.tab').on('click', 'span.edit-tab', function() {
    var elem = $(this);
    var tabName = elem.parent().text();
    tabName = tabName.replace(/\s*$/g, '');
    $('#tab-name').val(tabName);
    $('#tab-name').on('keypress', function(elem) {
        var appendedSpan = '';
        appendedSpan += '  <span class="edit-tab glyphicon glyphicon-pencil" ';
        appendedSpan += 'data-toggle="modal" data-target="#edit-tab-modal"></span>';
        var newName = $(this).val() + appendedSpan;
        el.parent().html(newName);
    });
});

我试图传入触发模态的元素，将其传递到输入的监听器中，但无论我尝试传入什么，变量 elem 都是 jQuery 对象适用于#tab-name，不适用于span.edit-tab。有什么想法吗？

Answer 1

我认为您唯一需要的就是在 keypress 上下文之外保存 eventData 和 $popupTriggerElem:

$('.popupTrigger').on('click', function(popupEventData) {
    var $popupTriggerElem = $(this);
    $('#tab-name').on('keypress', function(tabEventData) {
        var $tabElem = $(this);
        //now you can use all 4 variables:
        console.log(popupEventData);
        console.log($popupTriggerElem);
        console.log(tabEventData);
        console.log($tabElem);
    });
});

这样您就可以访问: - 触发点击事件的元素， - 点击事件数据 - 触发按键事件的元素 - 按键事件数据

JS 的厉害之处在于，您当前所在的任何函数/对象的每个父上下文都会保留，直到该函数/对象从内存中删除为止。

编辑:

正如您在@Wynand 评论中看到的，此行为基于闭包。更多内容请参见MDN docs 。