如何让这些JavaScript按钮工作？

我正在开发一个JavaScript聊天机器人库。某些命令更改可用按钮（例如，当您启动“测试命令”时，这些选项变为可用：是、否和取消）

当你点击cancel时，它会像我预期的那样将原来的按钮放回原位，但它们不能点击？如何使它们再次可点击

var commands = [
  "test command",
  "clear messages"
];

function message(status, message) {
  if (status == "sent") {
    $(".messages").append("<div class='message sent'><p>" + message + "</p></div>");
  } else {
    $(".messages").append("<div class='message from'><p>" + message + "</p></div > ");
  }
  $(".messages").animate({
    scrollTop: $('.messages').prop("scrollHeight")
  }, 500);
}

function buttons(commands) {
  $(".buttons").html("");
  $.each(commands, function(index, value) {
    var id = value.split(" ").join("-");
    $(".buttons").append('<div class="button" id ="command_' + id + '">' + value + '</div>');
  });
}
buttons(commands);
$("#command_test-command").click(function() {
  message("sent", "test command");
  var parameters = [
    "yes",
    "no",
    "cancel"
  ];
  buttons(parameters);
  $("#command_yes").click(function() {
    message("sent", "yes");
    message("from", "you said yes");
  });
  $("#command_no").click(function() {
    message("sent", "no");
    message("from", "you said no");
  });
  $("#command_cancel").click(function() {
    message("sent", "cancel");
    message("from", "you said cancel");
    buttons(commands);
  });
});
$("#command_clear-messages").click(function() {
  $(".messages").html("");
});

var命令=[
“测试命令”，
“清除消息”
];
功能消息（状态、消息）{
如果（状态=“已发送”）{
$（“.messages”）。追加（“”+message+”
”；
}否则{
$（“.messages”）。追加（“”+message+”
”；
}
$（“.messages”）.animate({
scrollTop:$（'.messages'）.prop（“scrollHeight”）
}, 500);
}
功能按钮（命令）{
$（“.buttons”）.html（“”）；
$.each（命令、函数（索引、值）{
var id=value.split（“”）.join（“”）；
$（“.buttons”）.append（“”+value+“”）；
});
}
按钮（命令）；
$（“#命令_测试命令”）。单击（函数（）{
消息（“已发送”、“测试命令”）；
变量参数=[
“是的”，
“不”，
“取消”
];
按钮（参数）；
$（“#命令_是”）。单击（函数（）{
信息（“已发送”、“是”）；
信息（“来自”，“你说是”）；
});
$（“#命令号”）。单击（函数（）{
信息（“已发送”、“否”）；
信息（“来自”，“你说不”）；
});
$（“#命令_取消”）。单击（函数（）{
信息（“已发送”、“取消”）；
消息（“来自”，“你说取消”）；
按钮（命令）；
});
});
$（“#命令_清除消息”）。单击（函数（）{
$（“.messages”）.html（“”）；
});

我不建议使用js设置html，但这会触发单击

$(".buttons").on('click','#command_test-command',function() {
    // test-command
});
$(".buttons").on('click','#command_clear-messages',function() {
    // clear messages
});

以你为例

var commands = [
  "test command",
  "clear messages"
];

function message(status, message) {
  if (status == "sent") {
    $(".messages").append("<div class='message sent'><p>" + message + "</p></div>");
  } else {
    $(".messages").append("<div class='message from'><p>" + message + "</p></div > ");
  }
  $(".messages").animate({
    scrollTop: $('.messages').prop("scrollHeight")
  }, 500);
}

function buttons(commands) {
  $(".buttons").html("");
  $.each(commands, function(index, value) {
    var id = value.split(" ").join("-");
    $(".buttons").append('<div class="button" id ="command_' + id + '">' + value + '</div>');
  });
}

$(".buttons").on('click','#command_test-command',function() {
  message("sent", "test command");
  var parameters = [
    "yes",
    "no",
    "cancel"
  ];
  buttons(parameters);
}).on('click','#command_clear-messages',function() {
    $(".messages").html("");
}).on('click','#command_yes',function() {
    message("sent", "yes");
    message("from", "you said yes");
}).on('click','#command_no',function() {
    message("sent", "no");
    message("from", "you said no");
}).on('click','#command_cancel',function() {
    message("sent", "cancel");
    message("from", "you said cancel");
    buttons(commands);
});

buttons(commands);

var命令=[
“测试命令”，
“清除消息”
];
功能消息（状态、消息）{
如果（状态=“已发送”）{
$（“.messages”）。追加（“”+message+”
”；
}否则{
$（“.messages”）。追加（“”+message+”
”；
}
$（“.messages”）.animate({
scrollTop:$（'.messages'）.prop（“scrollHeight”）
}, 500);
}
功能按钮（命令）{
$（“.buttons”）.html（“”）；
$.each（命令、函数（索引、值）{
var id=value.split（“”）.join（“”）；
$（“.buttons”）.append（“”+value+“”）；
});
}
$（“.buttons”）。在（'click'，'command#u test-command'，function（）上{
消息（“已发送”、“测试命令”）；
变量参数=[
“是的”，
“不”，
“取消”
];
按钮（参数）；
}).on（'单击'，'命令清除消息'，函数（））{
$（“.messages”）.html（“”）；
}).on（'click'，'命令'u yes'，函数（）{
信息（“已发送”、“是”）；
信息（“来自”，“你说是”）；
}).on（'单击'，'命令号'，函数（））{
信息（“已发送”、“否”）；
信息（“来自”，“你说不”）；
}).on（'单击'，'命令取消'，函数（））{
信息（“已发送”、“取消”）；
消息（“来自”，“你说取消”）；
按钮（命令）；
});
按钮（命令）；

yes、no和cancel按钮起作用。当你点击“取消”按钮时，原来的按钮又回来了（那些按钮不起作用）。检查（按钮现在可以工作了，但是…现在当我点击cancel并返回到test命令时，它会发送所有消息两次，然后如果我再次这样做，它会发送它们三次，以此类推。我只得到一个空白屏幕。我想错误是因为每次你点击#command#u test-command，你都会在其他按钮上添加另一个侦听器。我会更新我的答案我更新了y答案。如果对你有帮助，你可以投票：）删除了我之前的评论，因为我一时看不到这个问题，但是您确实在销毁元素并创建新的元素，之后不进行任何处理程序绑定。这只发生在

cancel

处理程序中。出于教育目的，这里有一种替代方法来完成您所追求的：它避免了destru持续破坏DOM结构中您最终仍希望使用的节点的主动方法。它们是预定义的命令组吗？或者您的意思是向“命令”添加更多命令组？不确定您指的是哪一个。我想我不确定您到底需要什么。对于这两个组中的任何一个，您都可以向传递到

create

的数组中添加更多对象。或者您可以使用新组向

create

添加更多调用。如果这只是简单地向您创建的组中添加更多节点以供显示或其他用途姿势，这是一个更大的话题。