Question

我想澄清一下浏览器脚本（例如javascript / jquery）与服务器端脚本（例如PHP）的区别以及它们如何相互交互。

如果我的html代码中有php代码，javascript肯定无法更改任何该脚本，因为它不是真的存在。服务器首先读取php代码然后将其输出（以及文件中的任何普通html代码）发送到Web浏览器，因此Web浏览器永远不会看到您的所有PHP代码。另一方面，php无法看到DOM，因为它还没有在浏览器上，因此在javascript方式上是动态的。你让他们互动的方式是ajax ......

我的问题是：我有一个jquery ajax调用，它调用一个php文件来创建一个表，并且表数据中有一个链接。有什么理由为什么当我从这个php文件创建表时我现在无法通过另一个jquery / javascript调用访问它？这是我的代码：

 $(document).ready(function()
   {
        $("#build_table, .Course_Name, .Start_Date, .Book_Title, .Book_Author, .Book_Isbn").click(function()
        {
            var whichButton = $(this).attr("class");
            console.log("Whichbotton = " + whichButton);
            var prog = $("#program option:selected").text();
            var sch = $("#school option:selected").text();
            var trm = $("#term option:selected").text();
            var ext = $("#extension option:selected").text();
            if(prog == "" || sch == "" || trm == "")
            {
                alert("Please enter a selection for each field");
            }
            else
            {
                $.get("build_table.php", {program: prog, school: sch, term: trm, extension: ext, button: whichButton},
                function(table)
                {   console.log("Entered table function");
                    $("#input_table").replaceWith("<div id='input_table'>" + table + "</div>");
                });
            }   
        });
   });

和我的php文件片段：

$program = $_GET["program"];
$school = $_GET["school"];
$term = $_GET["term"];
$extension = $_GET["extension"];
$button = $_GET["button"];

$con = mysql_connect("127.0.0.1","root","");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

$term = str_replace(" ", "", $term); 
$sql = "SELECT * FROM tbl_name WHERE Dep1= '" . $program . "' AND Dep2= '" . $school . "' AND Dep3 = '" . $term . "'";
if($button == "build_table")
{
//add nothing  
}
else
{   echo $button;
$button = str_replace("_", " ", $button);
$sql = $sql . "ORDER BY `" . $button . "` DESC";
}   
mysql_select_db("csv_db", $con);

$result = mysql_query($sql)  or die(mysql_error());
echo $sql;
$num_rows = mysql_num_rows($result);
echo "<br>Number of Rows: " . $num_rows; 
echo "<table id='booklist'><tr>
                         <th>Edit</th>
                         <th class='coursename'><a href='#' class='Course_Name'>Course Name</a></th>
                         <th class='startdate'><a href='#'>Start Date</a></th>
                         <th class='booktitle'><a href='#'>Book Title</></th>
                         <th class='bookauthor'><a href='#'>Book Author</a></th>
                         <th class='bookisbn'><a href='#' class='Course Name'>Book ISBN</a></th>
                     </tr>";

        while($row = mysql_fetch_array($result))
        { 
            echo    "<tr>
                        <td><input type='checkbox'></input></td>
                        <td class='coursename'>" . $row['Course Name'] . "</td>
                        <td class='startdate'>" . $row['Start Date'] . "</td>
                        <td class='booktitle'>" . $row['Book Title']. "</td>
                        <td class='author'>" . $row['Book Author']. "</td>
                        <td class='isbn'><input class='ISBN_number' type='text' value='' size='13' maxlength='13'></input></td> 
                  </tr>";                   
        }               
echo "</table>";

mysql_close($con);

我试图让它当我点击表格（表格）的名称时，它会对“课程名称”列进行排序（是的，其中有一个空格......反引号会处理它。）它不起作用。另一方面，当我尝试将简单的html放入我的普通html代码时

<a href="#" class="Course_Name" value="Course Name Sort">Course Name Sort</a>

它现在按照我的预期工作了。我错过了一个概念，还是我只是犯了一个简单的错误？

Answer 1

问题在于您分配点击处理程序的方式：

$("#build_table,.Course_Name,.Start_Date,.Book_Title,.Book_Author,.Book_Isbn")
.click(function() { 
    // your handler code
});

这就是说“将点击处理程序分配给当前与提供的选择器匹配的任何元素”。此处理程序不适用于您以后动态创建的元素（或通过Ajax加载）。

幸运的是，jQuery允许您以其他方式分配处理程序，以便它将应用于将来创建的元素：您可以使用.live()或.delegate()来设置处理程序，或者如果您'重新使用jQuery 1.7这些已被弃用，而不是.on()。

我还没有真正使用过.on()，但是这里有你如何使用.delegate()：

$(document).delegate(
   "#build_table,.Course_Name,.Start_Date,.Book_Title,.Book_Author,.Book_Isbn",
   "click",
   function() { 
       // your handler code
});

我建议你阅读所有三种方法的doco。

误解浏览器与服务器脚本？

1 个答案: