Question

在这里遇到问题我的jquery在单个页面上查看时工作得很好但是当我尝试在另一个页面中使用php include或ajax包含该PHP文件时，jquery似乎无法加载。

我对所有这些东西都很陌生，所以我很可能会做一些愚蠢的事情，非常感谢任何帮助！

HTML代码

 <html>
<head>

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

</head>
<body>

<form>
<select name="users" ID="option" onChange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">ID One</option>
<option value="2">ID Two</option>
<option value="3">ID Three</option>
<option value="4">ID Four</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

</body>

</html>

PHP / Jquery的的

 <html>
<head>





<link href="../../Styles/tablestyles.css" rel="stylesheet" type="text/css" />

<?php include "db.php" ?>

<script type="text/javascript" src="../../JS/tablesorter/jquery-latest.js"></script> 
<script type="text/javascript" src="../../JS/tablesorter/jquery.tablesorter.js"></script> 
<script type="text/javascript" src="../../JS/sorter.js"></script> 

<script>


$(document).ready(function() { 
    // call the tablesorter plugin 
    $("table").tablesorter({ 
        // sort on the first column and third column, order asc 
        sortList: [[0,0],[2,0]] 
    }); 


});
</script>

<?php

$q = intval($_GET['q']);

$result = mysqli_query($db_connection, "SELECT * FROM student WHERE Student_Id = '".$q."' or Student_Id = 7");

echo "<table id=\"myTable\" class=\"tablesorter\"> 
<thead> 
<tr> 
    <th>Student ID</th> 
    <th>B-Code</th> 
    <th>First Name</th> 
    <th>Second Name</th> 
    <th>Email</th> 
</tr> 
</thead> 
<tbody>

";

while($row = mysqli_fetch_array($result)) {

  echo "<tr>";
  echo "<td>" . $row['Student_Id'] . "</td>";
  echo "<td>" . $row['B-code'] . "</td>";
  echo "<td>" . $row['Student_Forename'] . "</td>";
  echo "<td>" . $row['Student_Surename'] . "</td>";
  echo "<td>" . $row['Student_Email'] . "</td>";
  echo "</tr>";

}

echo"</tbody> 
</table> ";



mysqli_close($con);
?>

Answer 1

您的AJAX请求将是getuser.php，我将假设您的第二个代码块代表什么？基本上，您不是调用一些处理并向您发送响应的PHP代码，而是实际上回调一个PHP脚本和一个HTML页面来引导，然后将其嵌入到现有页面中。

我建议您执行以下操作：

首先，从getuser.php中删除HTML，这样你剩下的只是PHP代码。

然后，在进行AJAX调用的页面中，作为“成功”功能的一部分，包括您的分拣机功能，以便在您获得响应并写出新的HTML后发生。以下内容的效果：

getuser.php：

<?php include "db.php";


$q = intval($_GET['q']);

$result = mysqli_query($db_connection, "SELECT * FROM student WHERE Student_Id = '".$q."' or Student_Id = 7");

echo "<table id=\"myTable\" class=\"tablesorter\"> 
<thead> 
<tr> 
    <th>Student ID</th> 
    <th>B-Code</th> 
    <th>First Name</th> 
    <th>Second Name</th> 
    <th>Email</th> 
</tr> 
</thead> 
<tbody>

";

while($row = mysqli_fetch_array($result)) {

  echo "<tr>";
  echo "<td>" . $row['Student_Id'] . "</td>";
  echo "<td>" . $row['B-code'] . "</td>";
  echo "<td>" . $row['Student_Forename'] . "</td>";
  echo "<td>" . $row['Student_Surename'] . "</td>";
  echo "<td>" . $row['Student_Email'] . "</td>";
  echo "</tr>";

}

echo"</tbody> 
</table> ";



mysqli_close($con);

然后，在您的呼叫页面成功代码中：

if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
$("table").tablesorter({ 
        // sort on the first column and third column, order asc 
        sortList: [[0,0],[2,0]] 
    }); 

    }
  }

此外，将必要的CSS和JavaScript包括移动到调用页面，以便您可以使用jQuery对象等。我还建议更改该代码以使用jQuery构造和函数而不是原始JavaScript。它将有助于保持代码清洁，一致且易于阅读：）

注意：我匆忙打字，所以任何人都可以随时打电话给我，并在任何错误时纠正我。

Answer 2

我认为问题在于，当您的jQuery脚本触发时，选择器语句的默认功能是select，并在此选择器的当前实例上执行此操作。

所以，如果你这样做：

$(document).ready(function() { 
    // call the tablesorter plugin 
    $("table").tablesorter({ 
        // sort on the first column and third column, order asc 
        sortList: [[0,0],[2,0]] 
    }); 
});

找到页面上的所有表标签，并在其上调用tablesorter。但是，如果向页面添加了其他表标记，或者在页面已经加载时将第一个表标记添加到页面中，则jquery不会将表调度程序调用到它上面，因为它在运行{{{ 1}}选择器。

这未经过测试，但您可以尝试在每次ajax加载时将.tablesorter挂钩到$（“table”）选择器上。

$("table")

类似的情况是你使用类似的东西：

$( document ).ajaxComplete(function() {
        $("table").tablesorter({ 
                // sort on the first column and third column, order asc 
                sortList: [[0,0],[2,0]] 
        }); 
});

.click事件仅绑定到首次加载页面时页面上存在的#target元素。稍后添加到页面的任何后续#target元素都不会绑定.click事件。

所以说。你有header.php，你的脚本存在。然后你有$( "#target" ).click(function() { alert( "Handler for .click() called." ); });，然后你有index.php。如果您在table.php中加入header.php，则index.php中的脚本会影响header.php中的元素。但是，如果您还在index.php中包含table.php，则index.php中的脚本不会影响header.php中的元素，除非您使用{{1}之类的相应事件绑定下面的事件。我想......？

要解决此问题，您必须使用.on事件：

table.php

.on事件将自身绑定到选择器的所有当前和后续实例，在此示例中，选择器为#target。

PHP / AJAX阻止jquery工作？

2 个答案: