CSS，Java脚本在php中调用ajax后无法正常工作

Question

我在php页面中调用了一个ajax函数，该函数工作正常，并根据要求提供输出，但在ajax调用后，它不会将默认的css和javascript属性返回到Input type select，

以下是我用于ajax调用的代码

<script>
function ajax_call(str) {
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("and").innerHTML = xmlhttp.responseText;
        }
    };
    xmlhttp.open("POST","ajaxpage.php?q="+str,true);
    xmlhttp.send();
}
</script>

它在输出中返回ajaxpage.php，现在我在ajaxpagephp页面中有一个下拉列表，它使用了choosen.css、choosen.js和multiselect.css以及multiselect.js，但这个下拉列表工作不正常，由于上面的ajax页面调用，上面的css和js都不正常，我已经在主页中应用了所有的css和js，请帮助我解决这个问题。

Answer 1

在ajax完成并将内容加载到html页面后，您必须再次初始化choosen。它无法正常工作，因为初始化chooseon时，DOM中不存在html。

Answer 2

您可以尝试使用$.ajax

下面我用了你的函数名，你可以在点击/更改事件中使用。如果是theResponse，则ajaxpage.php的输出是选择框本身，您可以在父页面的div中显示它

注意：Didnt测试了下面的代码

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
    function ajax_call(str) {
        $.ajax({
                type: "POST",  
                url: "ajaxpage.php",  
                data: { q:str},
                success: function(theResponse) {
                    // Output from ajaxpage.php
                    alert(theResponse); // comment this
                    }  
            });
    }
});                 
</script>

Answer 3

将.css和.js文件包含在发出ajax请求的页面中，而不是返回请求的页面。还要在ajax请求之后初始化受脚本影响的对象，因为在请求之前不会加载有问题元素的html。此外，您还可以使用.on方法将函数绑定到DOM中尚不存在的元素-请查看此处以获取有关.on方法的更多信息将单击事件附加到尚未添加到DOM 的JQuery对象