Как заставить эти кнопки JavaScript работать?

Question

Я работаю над библиотекой JavaScript chatbot. Некоторые команды меняют доступные кнопки (например, когда вы запускаете «тестовую команду», эти опции становятся доступными: да, нет, & отмена)

Когда вы нажимаете «Отменить», они возвращают оригинальные кнопки, как я предполагал, но они не являются Нельзя? Как я могу сделать их повторно нажатыми?

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

Я бы не рекомендовал настройки HTML с JS, но это должно вызвать щелчок

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