JQuery:如何动态引用元素

JQuery: How to reference element dynamically?

本文关键字：动态 引用 元素 何动态 JQuery      更新时间：2023-09-26

我有一个由两部分组成的开发问题。在第一部分中，我设置了几个委托的事件处理程序：

$('#content').on('click','#button1',function1);
$('#content').on('click','#button2',function2);

在函数 1 和函数 2 中，除其他处理外，我设置了全局变量来指示单击了哪个按钮：

function1(e) {
  ...
  var whichButtonClicked = $('#button1');
  ...
}
function2(e) {
  ...
  var whichButtonClicked = $('#button2');
  ...
}

稍后，其他代码需要删除处理程序。

$('#content').off('click',whichButtonClicked,theFunctionRun);

但是，.off 处理程序不起作用。如果我将其硬编码为这样的按钮之一，它确实有效：

$('#content').off('click','#button1',theFunctionRun);

但随后我失去了在任一按钮功能后运行它的能力。

如何更正此语句：

$('#content').off('click',whichButtonClicked,theFunctionRun);

使我的代码正常工作？

我可以在其上运行其他命令，例如：

whichButtonClicked.trigger('click');

JSFiddle： https://jsfiddle.net/nLorh2wm/20/

尝试删除元素周围的$(...)：

注意：代码段似乎没有显示警报，但您可以在此处看到它的工作原理：https://jsfiddle.net/rplittle/nLorh2wm/23/

$(document).ready(function() {
  $('#content').on('click', '#button1', function1);
  $('#content').on('click', '#button2', function2);
  $('#content').on('click', '#buttonAfter', followUpFunction);
});
var theButtonClicked;
var theFunctionRun;
function function1(e) {
  alert('in function1');
  theButtonClicked = '#button1';
  theFunctionRun = function1;
}
function function2(e) {
  alert('in function2');
  theButtonClicked = '#button2';
  theFunctionRun = function2;
}
function followUpFunction(e) {
  $('#content').off('click', theButtonClicked, theFunctionRun);
}
<div id="content">
  <button id="button1">
    Button 1
  </button>
  <button id="button2">
    Button 2
  </button>
  <button id="buttonAfter">
    Turn Off Handler for Button 1
  </button>
</div>

相关文章：