我通过通过ajax进行jsp调用来动态填充选择标签。
似乎style(css)和behavior(javascript)不适用于新填充的select标签,而静态填充的select标签却适用。
选择标签代码是
<div id='state' >
<select name='state' data-placeholder='select Courses' style='width:350px;' class='chosen-select' multiple tabindex='6'>
<option value='-1'>Nothing Here</option>
</select>
</div>
通过ajax调用jsp,上面的div id用相同的选择命名法填充。
定义使用的select样式的css文件是
<link rel="stylesheet" href="css/chosen.css">
用于select行为的javascript文件是
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' type="text/javascript"></script>
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
通过以下代码调用state.jsp来填充select
function showState(str){
....
....
var url="state.jsp";
url +="?count=" +str;
xmlHttp.onreadystatechange = stateChange;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChange(){
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("state").innerHTML=xmlHttp.responseText;
}
}
尽管动态创建标签,如何保持javascript行为?
我已经看到有关授权,绑定,实时和继续讨论的答案,但我仍然感到困惑。请帮我这个代码
最佳答案
没有一个可行的例子,很难确定,但是我相信问题将源于事情发生的顺序。您的js在页面加载时运行,因此它将样式和事件应用于当时找到的任何内容,这不会有什么用,因为您的ajax请求尚未返回数据。
因此,在使用ajax数据写入DOM之后,您将需要重新运行脚本以将样式和事件应用于新创建的元素。
关于javascript - javascript和css不适用于jsp基于ajax的动态填充标签,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31080121/