Javascript jQuery将自定义函数绑定到附加元素

我正在尝试创建一个web应用程序，它允许用户定义一个自定义JavaScript函数，然后在用户界面上添加一个按钮来很好地执行该函数

下面是一个代码示例

var customCommands = {
  command1: {
    text: 'Hello Console',
    cFunctionRun: function() {
      console.log('hello Console!');
    }
  },
  command2: {
    text: 'Hello World',
    cFunctionRun: function() {
      alert('hello World!');
    }
  }
}

然后，我编写了一个小函数，可以循环并构建按钮，并将它们添加到用户界面中。问题是当我将元素添加到用户界面时，单击按钮什么都不起作用

这是我尝试过的方法之一

for (var cmd in customCommands) {
    command = customCommands[cmd];
    button = $('<button/>').html(command.text).on('click', 
      function(){ 
        console.log(command.text); 
        command.cFunctionRun(); 
      }
    );
}
buttonContainer.append(button);

for（customCommands中的var cmd）{
command=customCommands[cmd]；
button=$（''）.html（command.text）.on（'单击'，
函数（）{
console.log（command.text）；
command.cFunctionRun（）；
}
);
}
buttonContainer.append（按钮）；

现在，我的循环构建一切都很好，甚至（'click'）上的

.on也可以工作，但它总是显示最后添加的命令的文本

这里显示发生了什么。
您需要的是通过函数传递参数，您应该尝试通过函数传递参数，您应该尝试当您实际单击时，命令变量指向最后一个命令（因为整个循环已经运行）。您应该维护每个按钮的数据状态，该按钮告诉它要调用哪个命令。你应该这样做

for(var i in customCommands) {
  if(customCommands.hasOwnProperty(i)){ //this is a pretty important check
    var command = customCommands[i];
    button = $('<button/>').html(command.text).data("command_name", command).on('click', function(){ 
      console.log($(this).data("command_name").text); 
      $(this).data("command_name").cFunctionRun(); 
    });

    $("body").append(button);
  }
}

for（自定义命令中的变量i）{
if（customCommands.hasOwnProperty（i））{//这是一个非常重要的检查
var command=customCommands[i]；
按钮=$（''）.html（command.text）.data（“command_name”，command）.on（'click'，function（）{
console.log（$（this.data（“命令名”）.text）；
$（this）.data（“command_name”）.cFunctionRun（）；
});
$（“正文”）。附加（按钮）；
}
}

实际单击时，命令变量指向最后一个命令（因为整个循环已经运行）。您应该维护每个按钮的数据状态，该按钮告诉它要调用哪个命令。你应该这样做

for(var i in customCommands) {
  if(customCommands.hasOwnProperty(i)){ //this is a pretty important check
    var command = customCommands[i];
    button = $('<button/>').html(command.text).data("command_name", command).on('click', function(){ 
      console.log($(this).data("command_name").text); 
      $(this).data("command_name").cFunctionRun(); 
    });

    $("body").append(button);
  }
}

for（自定义命令中的变量i）{
if（customCommands.hasOwnProperty（i））{//这是一个非常重要的检查
var command=customCommands[i]；
按钮=$（''）.html（command.text）.data（“command_name”，command）.on（'click'，function（）{
console.log（$（this.data（“命令名”）.text）；
$（this）.data（“command_name”）.cFunctionRun（）；
});
$（“正文”）。附加（按钮）；
}
}

这是一个（缺失的）关闭问题。事件处理程序将在循环的最后一次迭代中保留对command值的引用。要解决此问题，您可以使用立即调用的函数创建一个新范围：

for(var cmd in customCommands) {
    (function(command){
        button = $('<button/>').html(command.text).on('click', 
          function(){ 
            console.log(command.text); 
            command.cFunctionRun(); 
          }
        );
        buttonContainer.append(button);
    }(customCommands[cmd]));
}

for（customCommands中的var cmd）{
（功能（命令）{
button=$（''）.html（command.text）.on（'单击'，
函数（）{
console.log（command.text）；
command.cFunctionRun（）；
}
);
buttonContainer.append（按钮）；
}（自定义命令[cmd]）；
}
这是一个（缺少）关闭问题。事件处理程序将在循环的最后一次迭代中保留对command值的引用。要解决此问题，您可以使用立即调用的函数创建一个新范围：

for(var cmd in customCommands) {
    (function(command){
        button = $('<button/>').html(command.text).on('click', 
          function(){ 
            console.log(command.text); 
            command.cFunctionRun(); 
          }
        );
        buttonContainer.append(button);
    }(customCommands[cmd]));
}

for（customCommands中的var cmd）{
（功能（命令）{
button=$（''）.html（command.text）.on（'单击'，
函数（）{
console.log（command.text）；
command.cFunctionRun（）；
}
);
buttonContainer.append（按钮）；
}（自定义命令[cmd]）；
}
由于
按钮
s应该是唯一的（没有理由创建重复项），我将按钮
id
设置为customCommands的
名称（本例中为command1和command2）。这个示例可以很容易地调整为使用任何相对属性（数据-*、名称等）

在
文档
上创建一个
事件侦听器，以便在按下
按钮时使用。然后调用与给定
id
关联的函数

$(document).on("click", "button", function(){
    customCommands[this.id].cFunctionRun();
});

for(var command in customCommands){
    var button = $('<button id="' + command +'"/>').html(customCommands[command].text);
    $("body").append(button);
}

$（文档）。在（“单击”，“按钮”，函数（）上）{
customCommands[this.id].cFunctionRun（）；
});
for（customCommands中的var命令）{
var button=$（''）.html（customCommands[command].text）；
$（“正文”）。附加（按钮）；
}

由于
按钮
应该是唯一的（没有理由创建重复项），我将按钮
id
设置为自定义命令的
名称（本例中为command1和command2）。这个示例可以很容易地调整为使用任何相对属性（数据-*、名称等）

在
文档
上创建一个
事件侦听器，以便在按下
按钮时使用。然后调用与给定
id
关联的函数

$(document).on("click", "button", function(){
    customCommands[this.id].cFunctionRun();
});

for(var command in customCommands){
    var button = $('<button id="' + command +'"/>').html(customCommands[command].text);
    $("body").append(button);
}

$（文档）。在（“单击”，“按钮”，函数（）上）{
customCommands[this.id].cFunctionRun（）；
});
for（customCommands中的var命令）{
var button=$（''）.html（customCommands[command].text）；
$（“正文”）。附加（按钮）；
}

您能添加更多上下文吗？您正在显示的内容已经运行第二个代码正在查看。。。我现在将更新它以包含循环。您可以添加更多上下文吗？您正在显示的内容已经运行第二个代码正在查看。。。我现在将更新它，以包括环井这项工作，如果功能更复杂，那么只是显示文本。用户将使用它来帮助自动计算和运行自定义报告？如果函数更复杂，那么这项功能可以工作，然后只显示文本。用户将使用它来帮助自动计算和运行自定义报告？谢谢，我也想到了这一点，但我不喜欢使用ID标签的想法。谢谢你。@RobertE.McIntosh-任何属性都可以工作，但是这里的最大区别是，通过将事件附加到
文档
，您有一个
委托
事件。如果要向页面添加动态内容，则应采用这种方式。Th