为什么这个 HTML 永远不会触发这个 jQuery 函数？

Question

我没有在我的 CSS 样式表中将 showprayer 定义为一个类。

这就是这个 jQuery 函数从不为下面的 HTML 调用的原因吗？

    $('.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> 元素可能不是 <a> 元素的子元素。无论您的浏览器正在做什么尝试从错误中恢复，都可能导致 <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 处理的数据。