在 php 中调用 ajax 后 CSS、Javascript 无法正常工作答案

【问题标题】：CSS, Java script not working properly after ajax call in php在 php 中调用 ajax 后 CSS、Javascript 无法正常工作
【发布时间】：2016-04-11 06:23:40
【问题描述】：

我在 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，现在我在 ajaxpage.php 页面中有一个下拉列表，它使用了 choosen.css、choosen.js 和 multiselect.css 以及 multiselect.js，但这个下拉列表不是由于上面的ajax页面调用，上面的css和js都不能正常工作，我已经在主页应用了所有的css和js，请帮我解决这个问题。

【问题讨论】：

为什么不用$.ajax 而不是纯xhr？使用 xmlhttp 是您的要求吗？如果不是，您可以使用 [$.ajax](api.jquery.com/jquery.ajax)，其次请确保您已将委托用于动态元素。当您使用 ajax 时，.click() 无法正常工作。
在document.getElementById("and").innerHTML = xmlhttp.responseText; 之后初始化multi-select 小部件
choosen.css、choosen.js 和 multiselect.js 包含在哪里？他们是否需要任何初始化代码才能使所选元素工作
哇，使用 $ajax 而不是纯 xhr 是可行的。

标签： javascript php css ajax

【解决方案1】：

you have to intialize choosen again after the ajax is complete and content is loaded in your html page.it is not working correctly becuase when choosen was initialized the html was not there in the DOM.

【讨论】：

【解决方案2】：

您可以尝试使用$.ajax

下面我使用了您的函数名称，而不是您可以在单击/更改事件中执行操作。如果theResponse，ajaxpage.php 的输出是选择框本身，您可以在父页面的 div 中显示它

注意：下面的代码没有测试过

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

【讨论】：

【解决方案3】：

在发出 ajax 请求的页面中包含 .css 和 .js 文件，而不是在返回它的页面中。还要在 ajax 请求之后初始化受脚本影响的对象，因为在此之前不会加载相关元素的 html。您还可以使用 .on 方法将函数绑定到 DOM 中尚不存在的元素 - 在此处查看有关 .on 方法 Attaching click event to a JQuery object not yet added to the DOM 的更多信息

【讨论】：