我有一个链接到标签中的jquery脚本文件的jsp。在这个页面中，我有一个标签，当点击一个链接时，它必须从另一个jsp文件加载。新页面中也有一些jquery操作。但是当我加载页面时，不执行jquery操作，因此我也将jquery文件加载到新的jsp文件中。然后再次出现问题，即操作不止一次调用。请为此问题提供宝贵的回复，建议和解决方案......
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Flyers</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/jquery.json-2.3.min.js"></script>
</head>
<div class="page_steps">
<s:form method="post" action="flyers" name='ldm_form' id='ldm_form_flyers'>
<!-- Question 1 -->
<div class="questionstep">
<div class="stepno">STEP 1</div>
<h2>Enter the correct DEC:</h2>
<input type="text" id="dec" name="oci.dec" value="" class="inputbx numericonly" maxlength="16" />
<div class="errbox">Please enter valid DEC</div>
<input type="button" value="" class="btn_continue" />
</div>
<!-- Question 2-->
<div class="questionstep">
<div class="stepno">STEP 2</div>
<h2>Select Your target program</h2>
<div class="errbox">Please select at lease one</div>
<s:iterator value="targetPrograms">
<input type="radio" name="tpId" value="<s:property value="tpId"/>"/><label id="<s:property value="tpId"/>"><s:property value="tpName"/></label><br/>
</s:iterator>
<input type="button" value="" class="btn_continue" />
</div>
<!-- Question 3 -->
<div class="questionstep">
<div class="stepno">STEP 3</div>
<h2>Select Your Mailing Materials</h2>
<div class="errbox">Please select at lease one</div>
<strong>Self Mailer</strong><br />
<div class="mailmaterials">
<ul class="questslider">
<s:iterator value="mailingmaterials" id="mailMat" begin="0" end="1">
<li>
<div class="quickpreview"><p>QUICK PREVIEW</p><div class="noshow">
<s:iterator value="#mailMat.templatePath" id="tempPath" begin="0" end="1">
<s:property value="#tempPath.ldmImgPath"/><s:property value="#tempPath.ldmImgName"/>,
</s:iterator>
</div></div>
<s:iterator value="#mailMat.templatePath" id="tempPath" begin="2">
<img src="<s:property value="#tempPath.ldmImgPath"/><s:property value="#tempPath.ldmImgName"/>" width="90" height="149" alt="" />
</s:iterator>
<br />
<label>
<input type="radio" name="mailMatId" value="<s:property value="#mailMat.mailMatId"/>"/><s:property value="#mailMat.mailMatName"/></label>
</li>
</s:iterator>
</ul>
</div>
这是我的主要jsp页面，这里我只显示了标题部分和标签必须动态更改，页面上传非常大我觉得这样就够了，
在第二个jsp页面中我有
<s:set name="tabNo" value="tabNo"/>
<s:if test="%{#tabNo==0}">
<s:form method="post" action="flyers" name='ldm_form' id='ldm_form_flyers'>
<!-- Question 1 -->
<div class="questionstep">
<div class="stepno">STEP 1</div>
<h2>Enter the correct DEC:</h2>
<input type="text" id="dec" name="oci.dec" value="" class="inputbx numericonly" maxlength="16" />
<div class="errbox">Please enter valid DEC</div>
<input type="button" value="" class="btn_continue" />
</div>
<!-- Question 2-->
<div class="questionstep">
<div class="stepno">STEP 2</div>
<h2>Select Your target program</h2>
<div class="errbox">Please select at lease one</div>
<s:iterator value="ordCaptAct.targetPrograms">
<input type="radio" name="tpId" value="<s:property value="tpId"/>"/><label id="<s:property value="tpId"/>"><s:property value="tpName"/></label><br/>
</s:iterator>
<input type="button" value="" class="btn_continue" />
</div>
<!-- Question 3 -->
<div class="questionstep">
<div class="stepno">STEP 3</div>
<h2>Select Your Mailing Materials</h2>
<div class="errbox">Please select at lease one</div>
<strong>Self Mailer</strong><br />
<div class="mailmaterials">
<ul class="questslider">
<s:iterator value="ordCaptAct.mailingmaterials" id="mailMat" begin="0" end="1">
<li>
<div class="quickpreview"><p>QUICK PREVIEW</p><div class="noshow">
<s:iterator value="#mailMat.templatePath" id="tempPath" begin="0" end="1">
<s:property value="#tempPath.ldmImgPath"/><s:property value="#tempPath.ldmImgName"/>,
</s:iterator>
</div></div>
<s:iterator value="#mailMat.templatePath" id="tempPath" begin="2">
<img src="<s:property value="#tempPath.ldmImgPath"/><s:property value="#tempPath.ldmImgName"/>" width="90" height="149" alt="" />
</s:iterator>
<br />
<label>
<input type="radio" name="mailMatId" value="<s:property value="#mailMat.mailMatId"/>"/><s:property value="#mailMat.mailMatName"/></label>
</li>
</s:iterator>
</ul>
</div>
在jquery文件中，我有像这样的代码
$('.tab').click(function(){
$('.tabmenu').children().removeClass('active');
$(this).parent('li').addClass("active");
var tabIndex=$(this).parent('li').index();
alert(typeof jQuery);
changeTabHtml("tabMenuAction_forms.action", "tabNo="+tabIndex, '.page_steps');
changeTabHtml("tabMenuAction_steps.action", "tabNo="+tabIndex, '.orderprocess_steps');
changeTabHtml("tabMenuAction_headerCaption.action", "tabNo="+tabIndex, ".headercaption");
});
function changeTabHtml(urlLink, data, divClass){
$.ajax({
type: "POST",
url: urlLink,
data: data,
cache: false,
success: function(msg){
$(divClass).html(msg);
}
});
}
直到这里一切正常......第二页是动态加载一切正常。但是当它加载时，“btn_continue”必须调用一些jquery函数，如下面的
$('#ldm_form_flyers .btn_continue').click(function(){
var getid = $('.btn_continue').index($(this));
switch(getid){
case 0:
var getval = $.trim($("input[name='oci.dec']").val());
if(getval=='' || getval.length!=16 || getval.match(/[^\d]/)){
$("input[name='oci.dec']").addClass('err');
$('.questionstep:eq('+getid+') .errbox').slideDown();
}
else{
$.getJSON("btn_continueAction?btn_continueId="+getid+"&oci.dec="+getval, function(data){
var isNext=data.savedInSession;
$('.stepsanswer').eq(getid).find('span').html(getval);
$("input[name='oci.dec']").removeClass('err');
$('.decanswer').html(getval);
if(isNext==true)
nextquestion(getid);
else
$('.questionstep:eq('+getid+') .errbox').slideDown();
});
}
break;
现在加载此功能后无效。因此我试图在第二页加载jquery文件，然后它工作正常，但它开始多次点击服务器，因为文件加载两次，然后4次，然后8 ..并且最终增加我的应用程序减慢下。所以无论如何都要阻止加载文件，或任何解决方案为什么“btn_continue”无法正常工作而没有在第二个jsp中加载jquery文件...... ?????
答案 0 :(得分：2)
由于您要在DOM中动态添加元素，因此应使用.delegate()方法访问它们。
而不是
$('#ldm_form_flyers .btn_continue').click(function(){
使用此
$('#ldm_form_flyers .btn_continue').delegate("click", function() {
从jquery 1.7开始，您应该使用.on()代替.delegate()
live()，delegate()，on()方法的基本优势在于您可以使用它们来执行活动：hover，click等。 ，在一个尚不存在的元素上，直到你稍后通过AJAX，JavaScript的createElement方法等添加该元素。
注意：不推荐使用live，而应将delegate用于1.7.x以外的jQuery版本。阅读更多here
，当你基本上填充原始页面中的远程内容时，在第二个jsp中删除额外添加的javascript。
修改:::
因为你没有改变方式.on工作。你不能从“活”变为“开”。 api与.on()
$(document).on('click', '#ldm_form_flyers .btn_continue', function(){
//your code
});
它的工作原理如下::
$(document).on(events, selector, data, handler);
在使用之前，您应该始终查阅不同API here的相关文档。