使用.append()函数的Javascript和jQuery问题
在Grails.gsp中用jQuery中的.append函数追加div时遇到了问题。问题是,我试图附加的div是一个RichUI星级块,它是在我使用标记时以编程方式编写的。代码如下: Grails.gsp中的代码:使用.append()函数的Javascript和jQuery问题,javascript,jquery,grails-plugin,Javascript,Jquery,Grails Plugin,在Grails.gsp中用jQuery中的.append函数追加div时遇到了问题。问题是,我试图附加的div是一个RichUI星级块,它是在我使用标记时以编程方式编写的。代码如下: Grails.gsp中的代码: var textToInsert = []; textToInsert[1] = '<tr><td>'; textToInsert[2] = artistData.name; textToInsert[3] = '</td><td>&l
var textToInsert = [];
textToInsert[1] = '<tr><td>';
textToInsert[2] = artistData.name;
textToInsert[3] = '</td><td><div id="artist2"><richui:rating dynamic="true" id="2" units="5" rating="0" controller="rating" action="rate"/></div></td></tr>';
$j('#recommendedList').append(textToInsert.join(''));
var textToInsert = [];
textToInsert[1] = '<tr><td>';
textToInsert[2] = artistData.name;
textToInsert[3] = '</td><td><div id="artist2"><div id='r3a44146338e7d18384c9233cb7f7bb82'>
<div class='ratingblock'>
<div id='unit_longr3a44146338e7d18384c9233cb7f7bb82'>
<ul id='unit_ulr3a44146338e7d18384c9233cb7f7bb82' class='unit-rating' style='width: 150px'>
<li id='r9cd7abbd875dc72e67c84180c5b41704' class='current-rating' style='width: 0px;'>Currently 0.0</li>
<li><a href="/Ontourtest/rating/rate/2?rating=1" onclick="new Ajax.Updater('r3a44146338e7d18384c9233cb7f7bb82','/Ontourtest/rating/rate/2',{asynchronous:true,evalScripts:true,parameters:'rating=1'});return false;" class="r1-unit rater" title="1">1</a></li>
<li><a href="/Ontourtest/rating/rate/2?rating=2" onclick="new Ajax.Updater('r3a44146338e7d18384c9233cb7f7bb82','/Ontourtest/rating/rate/2',{asynchronous:true,evalScripts:true,parameters:'rating=2'});return false;" class="r2-unit rater" title="2">2</a></li>
<li><a href="/Ontourtest/rating/rate/2?rating=3" onclick="new Ajax.Updater('r3a44146338e7d18384c9233cb7f7bb82','/Ontourtest/rating/rate/2',{asynchronous:true,evalScripts:true,parameters:'rating=3'});return false;" class="r3-unit rater" title="3">3</a></li>
<li><a href="/Ontourtest/rating/rate/2?rating=4" onclick="new Ajax.Updater('r3a44146338e7d18384c9233cb7f7bb82','/Ontourtest/rating/rate/2',{asynchronous:true,evalScripts:true,parameters:'rating=4'});return false;" class="r4-unit rater" title="4">4</a></li>
<li><a href="/Ontourtest/rating/rate/2?rating=5" onclick="new Ajax.Updater('r3a44146338e7d18384c9233cb7f7bb82','/Ontourtest/rating/rate/2',{asynchronous:true,evalScripts:true,parameters:'rating=5'});return false;" class="r5-unit rater" title="5">5</a></li>
</ul>
</div>
</div>
</div></div></td></tr>';
$j('#recommendedList').append(textToInsert.join(''));
var textToInsert=[];
textToInsert[1]='';
textToInsert[2]=artistData.name;
textToInsert[3]='';
$j(“#推荐列表”).append(textToInsert.join(“”));
而生成的html正是这样的:
var textToInsert = [];
textToInsert[1] = '<tr><td>';
textToInsert[2] = artistData.name;
textToInsert[3] = '</td><td><div id="artist2"><richui:rating dynamic="true" id="2" units="5" rating="0" controller="rating" action="rate"/></div></td></tr>';
$j('#recommendedList').append(textToInsert.join(''));
var textToInsert = [];
textToInsert[1] = '<tr><td>';
textToInsert[2] = artistData.name;
textToInsert[3] = '</td><td><div id="artist2"><div id='r3a44146338e7d18384c9233cb7f7bb82'>
<div class='ratingblock'>
<div id='unit_longr3a44146338e7d18384c9233cb7f7bb82'>
<ul id='unit_ulr3a44146338e7d18384c9233cb7f7bb82' class='unit-rating' style='width: 150px'>
<li id='r9cd7abbd875dc72e67c84180c5b41704' class='current-rating' style='width: 0px;'>Currently 0.0</li>
<li><a href="/Ontourtest/rating/rate/2?rating=1" onclick="new Ajax.Updater('r3a44146338e7d18384c9233cb7f7bb82','/Ontourtest/rating/rate/2',{asynchronous:true,evalScripts:true,parameters:'rating=1'});return false;" class="r1-unit rater" title="1">1</a></li>
<li><a href="/Ontourtest/rating/rate/2?rating=2" onclick="new Ajax.Updater('r3a44146338e7d18384c9233cb7f7bb82','/Ontourtest/rating/rate/2',{asynchronous:true,evalScripts:true,parameters:'rating=2'});return false;" class="r2-unit rater" title="2">2</a></li>
<li><a href="/Ontourtest/rating/rate/2?rating=3" onclick="new Ajax.Updater('r3a44146338e7d18384c9233cb7f7bb82','/Ontourtest/rating/rate/2',{asynchronous:true,evalScripts:true,parameters:'rating=3'});return false;" class="r3-unit rater" title="3">3</a></li>
<li><a href="/Ontourtest/rating/rate/2?rating=4" onclick="new Ajax.Updater('r3a44146338e7d18384c9233cb7f7bb82','/Ontourtest/rating/rate/2',{asynchronous:true,evalScripts:true,parameters:'rating=4'});return false;" class="r4-unit rater" title="4">4</a></li>
<li><a href="/Ontourtest/rating/rate/2?rating=5" onclick="new Ajax.Updater('r3a44146338e7d18384c9233cb7f7bb82','/Ontourtest/rating/rate/2',{asynchronous:true,evalScripts:true,parameters:'rating=5'});return false;" class="r5-unit rater" title="5">5</a></li>
</ul>
</div>
</div>
</div></div></td></tr>';
$j('#recommendedList').append(textToInsert.join(''));
var textToInsert=[];
textToInsert[1]='';
textToInsert[2]=artistData.name;
textToInsert[3]='
';
$j(“#推荐列表”).append(textToInsert.join(“”));
Firebug给出错误:丢失;before语句textToInsert[3]='
我的猜测是,当richui标记写入不带分号的新行字符时,它会产生javascript错误,但我不确定
有没有办法克服这个问题?
非常感谢 这意味着这一行有错误(以及下面的所有行,我不会全部复制):
textToInsert[3]='
我认为错误在于你没有逃避单引号。您可以使用双引号:
textToInsert[3] = '</td><td><div id="artist2"><div id="r3a44146338e7d18384c9233cb7f7bb82">'
textToInsert[3]=''
如果要保留单引号,则需要对其进行转义:
textToInsert[3] = '</td><td><div id="artist2"><div id=\'r3a44146338e7d18384c9233cb7f7bb82\'>
textToInsert[3]='
动态标记使用单引号而不是双引号似乎是您的问题。字符串过早结束<代码>“应阅读”
,特别注意id和类标识符。@f0x:这是正确的,因此必须更改分级组件中的代码,以便在字符串中使用。是的,但问题是这些行是由RichUI插件生成的。我不知道如何修改它们,或者是否有可能。