Javascript 将元素从一个侦听器传递到嵌套侦听器

当点击一个按钮时，一个监听器启动，一个模态打开，我需要从点击的按钮中获取信息，并将其传递给当模态内部发生事件时启动的监听器

我的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);
    });
});

$（'li.tab'）。在（'click'，'span.edit tab'，function（）上{
var elem=$（本）；
var tabName=elem.parent（）.text（）；
tabName=tabName.replace（/\s*$/g'，）；
$（'#tab name'）.val（tabName）；
$（“#选项卡名称”）。在（'keypress'，函数（elem）上{
var appendedSpan=''；
追加span+=''；
var newName=$（this）.val（）+appendedSpan；
el.parent（）.html（newName）；
});
});

---

我试图传入触发模态的元素以传入输入的侦听器，但无论我尝试传入什么，变量

elem

都是

#tab name

的jQuery对象，而不是

span.edit tab

。有什么想法吗？

我想你只需要在

按键

上下文之外保存

事件数据

和

$poputriggerelem

：

$('.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 comment中所看到的，此行为基于

闭包

。更多

我认为您唯一需要的是在

按键

上下文之外保存

事件数据

和

$poputriggerelem

：

$('.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 comment中所看到的，此行为基于

闭包

。更多

另一个解决方案是将您需要的属性添加到事件目标中

下面的代码片段说明了在发生“mousedown”事件时，“mousemove”事件是如何被欺骗的。为了实现这一点，我们需要存储函数，以便以后可以删除它

如果我们按照上面的答案处理这个问题，我们必须将结果存储为一个全局变量。相反，建议将该值添加到html目标。下面的代码片段对此进行了说明，其中我需要初始的“mousedown”位置以及“mouseup”位置

canvas.addEventListener（“鼠标向下”，向下=>{
down.target.posX=down.layerX；
此.addEventListener（“mousemove”，mousedown和mousemove）；
});
canvas.addEventListener（“单击”，e=>{
这个.removeEventListener（“mousemove”，mousedown和mousemove）；
});
const mousedown和mousemove=move=>{
log（“初始点击位置：”，move.target.posX）；
控制台日志（“新移动位置：”，move.layerX）；
};

另一个解决方案是将您需要的属性添加到事件目标中

下面的代码片段说明了在发生“mousedown”事件时，“mousemove”事件是如何被欺骗的。为了实现这一点，我们需要存储函数，以便以后可以删除它

如果我们按照上面的答案处理这个问题，我们必须将结果存储为一个全局变量。相反，建议将该值添加到html目标。下面的代码片段对此进行了说明，其中我需要初始的“mousedown”位置以及“mouseup”位置

canvas.addEventListener（“鼠标向下”，向下=>{
down.target.posX=down.layerX；
此.addEventListener（“mousemove”，mousedown和mousemove）；
});
canvas.addEventListener（“单击”，e=>{
这个.removeEventListener（“mousemove”，mousedown和mousemove）；
});
const mousedown和mousemove=move=>{
log（“初始点击位置：”，move.target.posX）；
控制台日志（“新移动位置：”，move.layerX）；
};

您的意思是：闭包；]是的，我的意思是使用闭包，但考虑到@Ilan Biala可能不知道闭包是什么，我试着用不同的方式解释它。但如果他知道，他会得出和你完全相同的假设。无论如何，我会把它添加到答案中-谢谢。是的，我一直忘了你可以在嵌套的侦听器中调用它。我想我很困惑，因为在过去的几周里我一直在努力学习AngularJS，这很复杂。谢谢你的帮助。：）你的意思是：闭包；]是的，我的意思是使用闭包，但考虑到@Ilan Biala可能不知道闭包是什么，我试着用不同的方式解释它。但如果他知道，他会得出和你完全相同的假设。无论如何，我会把它添加到答案中-谢谢。是的，我一直忘了你可以在嵌套的侦听器中调用它。我想我很困惑，因为在过去的几周里我一直在努力学习AngularJS，这很复杂。谢谢你的帮助。：）