jQuery無法處理AJAX加載的內容來顯示/隱藏div內容

Question

我正在一個項目中，我需要根據下拉值顯示/隱藏div。 顯示/隱藏在同一頁面上執行時可以正常工作，但是當我在AJAX加載的函數中嘗試同樣的操作時，它將失敗。

我希望有一些我不知道的缺失。

簡而言之，我想在加載AJAX的頁面上選擇選項時隱藏/顯示div。

index.php ：

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
    function showUser(str) {
        if (str == "") {
            document.getElementById("txtHint").innerHTML = "";
            return;
        } else {
            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("txtHint").innerHTML = xmlhttp.responseText;
                }
            };
            xmlhttp.open("GET","getdata.php?q="+str,true);
            xmlhttp.send();
        }
    }
    </script>
</head>

<body>
    <form>
        <!-- there is nothing related to it... it's here because I have copied it from the w3schools website -->
        <select name="users" onchange="showUser(this.value)">
            <option value="">Select a person:</option>
            <option value="1">getdata</option>
        </select>
    </form>
    <br><br><br>
    <div id="txtHint" style="background-color: #CCCCCC"><b> ajax data will listed here</b></div>
</body>
</html>

getdata.php ：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <p> its page2</p>
    <select name="type" id="type" >
        <option value="1show" >show div 1</option>
        <option value="2show" >show div 1 </option>
    </select>

    <div id="div1" style="display:none">
        div1 data
    </div>
    <div id="div2" style="display:none">
        div 2 data 
    </div>
</body>
</html>

<script>
$('#type').on('change', function() {
    if ( this.value == '1show' ) {
        $("#div1").show();
        $("#div2").hide();
    } else if(this.value == '2show') {
        $("#div1").hide();
        $("#div2").show();
    }
});
</script>

Answer 1

可能是INDEX.php的ajax，僅加載html數據。 所以我創建了一個包含所有腳本的文件，並且工作正常。 仍在等待任何專家解釋為什么會這樣。

這包含js數據，這就是在第一個ajax被稱為$（“＃box”）。load（“ ab.js”）之后，我如何在索引頁面中調用js文件；

Answer 2

您需要將事件綁定到文檔。

嘗試

$(document).on('change','#type' ,function() {
    if ( this.value == '1show' ) {
        $("#div1").show();
        $("#div2").hide();
    } else if(this.value == '2show') {
        $("#div1").hide();
        $("#div2").show();
    }
});

jQuery無法處理AJAX加載的內容來顯示/隱藏div內容

問題描述

2 個解決方案

解決方案1
0 2016-04-22 11:02:40

解決方案2
0 已采納 2016-04-22 12:40:37

jQuery無法處理AJAX加載的內容來顯示/隱藏div內容

問題描述

2 個解決方案

解決方案1 0 2016-04-22 11:02:40

解決方案2 0 已采納 2016-04-22 12:40:37

解決方案1
0 2016-04-22 11:02:40

解決方案2
0 已采納 2016-04-22 12:40:37