我有一个四步表单,用户通过它完成一个过程。每个步骤都是一个单独的部分。我想使用 Ajax 引导用户浏览表单,并根据他们在流程中所处的步骤决定显示哪个部分。我可以根据单击的按钮判断他们在哪一步。但是,一旦我添加了点击逻辑,下面的代码就不会在浏览器中呈现任何内容。当我取出点击监听器时,一切正常。
$(function(){
$("#ask2-btn").click(function(e){
$("div#ask").html("<%= escape_javascript(render('asks/ask3')) %>")
});
$("#ask3-btn").click(function(e){
$("div#ask").html("<%= escape_javascript(render('asks/ask4')) %>")
});
});
更新:这是来自未呈现的浏览器的响应
$(function(){
$("#ask2-btn").click(function(e){
$("div#ask").html("<p class=\"lead\">Help with this issue<\/p>\n<ul><li class=\"profile\">Sam Smith<\/li><\/ul>\n<em>\"Expected outcome of the ASK?<\/em>\n <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"✓\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n \n <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Advice\" />\n <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Advice\" />\n<\/form> <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"✓\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n \n <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Introduction\" />\n <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Introduction\" />\n<\/form> <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"✓\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n \n <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Support\" />\n <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Support\" />\n<\/form> <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"✓\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n \n <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Money\" />\n <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Money\" />\n<\/form> <form accept-charset=\"UTF-8\" action=\"/asks/125\" class=\"edit_ask\" data-remote=\"true\" id=\"edit_ask_125\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"✓\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"2/vhLplWpnB5fSrkjgku27jzaJ0lwLK3GeOWchn6r8M=\" /><\/div>\n \n <input id=\"ask_category\" name=\"ask[category]\" type=\"hidden\" value=\"Don't know\" />\n <input class=\"btn btn-success btn-category\" name=\"commit\" type=\"submit\" value=\"Don't know\" />\n<\/form>")
});
$("#ask3-btn").click(function(e){
$("div#ask").html("<p class=\"lead\">Help with this issue<\/p>\n<ul>\n <li class=\"profile\">Sam Smith<\/li>\n <li class=\"check\"><\/li>\n<\/ul>\n <hr/>\n <a href=\"/\">Add another ASK<\/a>")
});
});