Question

我有索引页面，从索引页面我调用了Jquery和PHP页面（合并在one.php文件中），如果我单独运行one.php文件，一切运行正常，但是如果我通过Ajax调用同一页面那么它就不会运行

示例代码：

的index.php

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>mouseover demo</title>
        <script src="script/javaScript.js"></script>
    </head>        
    <body>
        <a style="cursor:pointer;" onclick="addpage()">click</a>
        <div id="view"></div>
    </body>
</html>

javascript.js

$(document).ready(function () {
    $( "div[class^=star]" ).mouseover(function() {
        $( this ).find( "span" ).text( "mouse Over" );  
    }).mouseout(function() {
        $( this ).find( "span" ).text( "mouse Out" );   
    }); 
});

function addpage(){
    var xmlhttp;
    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("view").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST","one.php",true);
    xmlhttp.send();
}

one.php

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>mouseover demo</title>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
        <script src="script/javaScript.js"></script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div class="staroverout">
                        <span>move cursor to change text</span>
                    </div>
                    <br>
                    <div class="staroverout">
                        <span>move cursor to change text</span>
                    </div>
                    <br>
                    <div class="nstaroverout">
                        <span>move cursor to change text</span>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

Answer 1

您正在使用jQuery，但是您忘记了它（在index.php中）：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="script/javaScript.js"></script>

使用Ajax获取数据时，应使用Event Delegation将事件附加到元素：

$(document).ready(function () {
    $('body').on('mouseover', "div[class^=star]", function() {
        $( this ).find( "span" ).text( "mouse Over" );  
    }).on('mouseout', "div[class^=star]", function() {
        $( this ).find( "span" ).text( "mouse Out" );   
    });
});

从html文件中删除多余的元素（head，script，one.php）：

<table>
    <tr>
        <td>
            <div class="staroverout">
                <span>move cursor to change text</span>
            </div>
            <br>
            <div class="staroverout">
                <span>move cursor to change text</span>
            </div>
            <br>
            <div class="nstaroverout">
                <span>move cursor to change text</span>
            </div>
        </td>
    </tr>
</table>

如果您正在使用jQuery，请使用$.ajax发送Ajax请求。

Answer 2

如果尝试在one.php中删除那些jquery.js，那该怎么办？

因为当你再次将jquery包含在页面“one.php”中时，jquery已经包含在页面中了，我再次被包含在内，导致JQuery Conflict

Jquery在通过Ajax调用另一个页面时没有运行

2 个答案: