javascript 和 css 不适用于 jsp 基于 ajax 的动态填充标签

Question

我通过 ajax 调用 jsp 动态填充选择标记。 似乎 style(css) 和 behavior(javascript) 不适用于新填充的选择标签，而同样适用于静态填充的选择标签。 选择标签代码是

<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>

上面的 div id 通过 ajax 调用 jsp 填充了相同的选择命名法。 定义所用选择样式的 css 文件是

<link rel="stylesheet" href="css/chosen.css">

用于选择行为的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 行为？ 我看到了关于委托(delegate)、绑定(bind)、生活和继续讨论的答案，但我仍然感到困惑。请帮我处理这段代码

Answer 1

如果没有工作示例，很难确定，但我相信问题将源于事情发生的顺序。您的 js 在页面加载时运行，因此它会将样式和事件应用于当时找到的任何内容，这将是空的，因为您的 ajax 请求尚未返回数据。

因此，在使用 ajax 数据写入 DOM 后，您需要重新运行脚本以将样式和事件应用于新创建的元素。