Javascript 向动态内容添加动态内容。可能吗?
我正在为一个班级创建一个测验网站,在设置用户创建问题的页面格式时遇到了问题。我希望在用户单击单选按钮时,弹出与特定问题类型相关的附加信息。然后,如果用户单击在初始附加信息中创建的按钮,我希望弹出更多附加信息 所以一开始是这样的 那就这样了 然后,一旦用户点击添加选项按钮几次,它就会像这样 为了实现这一点,我尝试使用jquery添加新内容。然而,我似乎无法显示这些内容。这是当前的代码 jsp中的Javascript 向动态内容添加动态内容。可能吗?,javascript,jquery,jsp,web-applications,Javascript,Jquery,Jsp,Web Applications,我正在为一个班级创建一个测验网站,在设置用户创建问题的页面格式时遇到了问题。我希望在用户单击单选按钮时,弹出与特定问题类型相关的附加信息。然后,如果用户单击在初始附加信息中创建的按钮,我希望弹出更多附加信息 所以一开始是这样的 那就这样了 然后,一旦用户点击添加选项按钮几次,它就会像这样 为了实现这一点,我尝试使用jquery添加新内容。然而,我似乎无法显示这些内容。这是当前的代码 jsp中的 <%@ page language="java" contentType="text/ht
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="QuestionsCreate.js"></script>
<meta charset="UTF-8">
<title>Quiz Creation</title>
</head>
<body>
<h1>Create Your Quiz</h1>
<form action="QuestionsCreateServlet" method="post">
<h2>Question Type</h2>
<input type="radio" name="type" class="type" id="multipleChoice"
value="multipleChoice" />
<label for="multipleChoice">Multiple Choice</label><br/>
<input type="radio" name="type" class="type" id="fillBlank"
value="fillBlank" />
<label for="fillBlank">Fill-in-the-Blank</label><br/>
<input type="radio" name="type" class="type" id="pictureResponse"
value="pictureResponse" />
<label for="pictureRsponse">Picture Response</label><br/>
<input type="radio" name="type" class="type" id="textResponse"
value="textResponse" />
<label for="textResponse">Text Response</label><hr/>
<div class="jspf"></div>
<input type="submit" name="button" id="button" value="Finish" />
</form>
</body>
</html>
测验创作
创建您的测验
问题类型
多项选择
填空
图片响应
文本响应
javascript中的
$(document).ready(function() {
$(".type").click(function(){
$(".jspf").html("<jsp:include page='WEB-INF/" +
$(".type").attr("value") + ".jspf' />");
$("#button").attr("value", "Add");
});
var nOptions = 1;
$("#add-option").click(function(){
++nOptions;
$(".options").append("<input type='checkbox' name='option" +
nOptions + "' value='" + nOptions + "' /> " +
"<input name='name" + nOptions + "' /><br />");
});
var nBlanks = 1;
$("#add-answer").click(function() {
++nBlanks;
$(".fill-blank-answer").append("<input name='answer" + nBlanks +
"' /><br/>");
});
});
$(文档).ready(函数(){
$(“.type”)。单击(函数(){
$(“.jspf”).html(“”);
$(“#按钮”).attr(“值”、“添加”);
});
var-nOptions=1;
$(“#添加选项”)。单击(函数(){
++无选项;
$(“.options”).append(“)+
“
”;
});
var nBlanks=1;
$(“#添加答案”)。单击(函数(){
++nBlanks;
$(“.fill blank answer”)。追加(
);
});
});
样本jspf
<h3>Question</h3>
<input name="prompt" />
<h3>Options</h3>
Check the options that denote the correct answer<br/>
<div class="options">
<input type='checkbox' name='option1' value='1' />
<input name='name1' /><br />
</div>
<input type="button" value="Add Option" id="add-option" /><hr/>
问题
选择权
检查表示正确答案的选项
我还尝试将jspf代码移动到javascript中,但也没有成功
有没有一种方法可以根据动态添加的内容向我的网页动态添加内容?提前感谢 您遇到的问题是,您试图将服务器端JSP标记注入到客户端浏览器中。以这一行为例:
$(".jspf").html("<jsp:include page='WEB-INF/" +
$(".type").attr("value") + ".jspf' />");
将AJAX请求从客户端浏览器发送回服务器,从服务器检索一点HTML,然后将其插入到与CSS选择器“.jspf”匹配的元素中
您的初始单击处理程序也有问题
$(".type").attr("value")
始终返回第一个匹配元素的属性值,因此无论用户单击什么,该行都将计算为“multipleChoice”。您可能想做的是:
$(this).attr("value")
在点击处理程序的上下文中,“this”指的是用户刚刚点击的内容
更新
下面是加载辅助内容后如何添加“添加选项”单击处理程序:
$('jspf').load('/fragments/pictureResponse.jspf', function() {
$('#add-option').click(function() {
nOptions++;
$('.options').append('<input type="checkbox" name="option' + nOptions +
'" value="' + nOptions + '" /> <input name="name' + nOptions + '" /><br />");
});
});
$('jspf').load('/fragments/picturereresponse.jspf',function(){
$(“#添加选项”)。单击(函数(){
nOptions++;
$('.options')。追加(“
”);
});
});
$.get(“${ctx}/store/terminalApply/applyTemplate?terminalType=${terminalType}&index=“+num,函数(数据){
$(“#contentDiv”)。追加(数据);
}))
数据是一个对初始动态内容起作用的页面内容。通过将所有内容放入javascript中,我能够产生相同的结果。如何加载辅助动态内容?这部分可能吗?辅助内容可能存在的问题是,您正试图将事件处理程序附加到DOM元素nt,因为您正在尝试在document.ready事件中附加处理程序。我建议使用$.load()的第二个参数,这是一个回调,将在AJAX请求完成后执行。一旦执行该回调,新元素将出现在文档DOM中,因此您可以在其中添加新的事件处理程序。当然不会,您将在时空连续体中撕开一个洞,我们所知的生命将不复存在。假定这是最坏的情况scenario另一方面,它可能只是工作而已。${terminalType}应该在双引号内吗?
$(this).attr("value")
$('jspf').load('/fragments/pictureResponse.jspf', function() {
$('#add-option').click(function() {
nOptions++;
$('.options').append('<input type="checkbox" name="option' + nOptions +
'" value="' + nOptions + '" /> <input name="name' + nOptions + '" /><br />");
});
});