ブラウザとサーバースクリプトの誤解？

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 
}); 

私はあなたがすべての3つのメソッドのDOCOを読むことをお勧め。