如何让这些 JavaScript 按钮工作？

Question

I'm working on a JavaScript chatbot library. Certain commands change the buttons available (for example when you initiate the "test command" these options become available: yes, no, & cancel)

When you hit cancel it puts the original buttons back like I intended, but they aren't clickable? How can I make them clickable again?

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("");
});

Answer 1

I wouldn't recommend setting html with js but this should trigger the click

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

For your example

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);