爲什麼這個HTML永遠不會觸發這個jQuery函數？

Question

我沒有在我的CSS樣式表中將showprayer定義爲一個類。

是否這是從來沒有要求下面的HTML jQuery函數的原因？

$('.showprayer').click(function(event) 
    { 
     console.log("showprayer"); 

     $.post('/show_prayer', { 'name' : $(this).text() }, function(data) 
     { 
      //... do something with the data returned from the post 
     }); 
    }); 


    <a href="#" id="showprayer_106" class="showprayer"> 
     <tr id="prayer_106" > 
      <td>Prayer <span class="prayerspn" id="prayerspn_106">106</span></td> 
      <td>03/19/1968</td> 
     </tr> 
    </a> 

我試圖通過prayerId（在這種情況下106到/show_prayer處理器有可能是一個更簡單的方法來做到這一點，但我能想到的最簡單的方法就是把它上面的範圍內：

<span class="prayerspn" id="prayerspn_106">106</span></td> 

再拉文（"106"）從跨度，並通過它在$.post通話。

Answer 1

的HTML是無效的。<tr>元件可以不柒dren <a>元素。無論您的瀏覽器正在嘗試從錯誤中恢復，可能最終都會導致元素爲空，因此沒有任何可點擊的像素。您的標記始終爲validate。

URI「show_prayer」強烈建議此功能全部關於獲取和顯示信息。如果是這樣，那麼一個鏈接是正確的選擇（但你應該改變JS，所以它會發出一個GET請求，而不是POST請求），否則你應該看看使用表單。

假設一個鏈接是正確的方向，然後it should point to something more sensible比頁面的頂部。

如果我們將上面的代碼，那麼我們得到的東西，如：

<tr id="prayer_106" > 
    <td><a href="/show_prayer?name=106">Prayer 106</a></td> 
    <td>03/19/1968</td> 
</tr> 

然後，您可以沿着線應用JS：

function handlePrayer(e) { 
    var uri = jQuery('a', this).attr('href'); 
    jQuery.get(uri, function (data) { /* Do something with the returned data */ }; 
    e.stopPropagation(); 
    return false; 
} 
jQuery('table.myTable tr').click(handlePrayer); 

jQuery將添加一個HTTP標頭（ X-Requested-With：XMLHttpRequest），你可以用它來決定/ show_prayer是否應該返回一個完整的HTML文檔，或者只是你想用JavaScript處理的數據。