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

Question

我没有showprayer在CSS样式表中定义为类.

这就是为什么这个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>

然后将text("106")拉出span并在$.post调用中传递它.

Answer 1

HTML无效.<tr>元素可能不是<a>元素的子元素.无论您的浏览器尝试从错误中恢复,可能最终导致<a>元素为空,因此没有任何可点击的像素.

始终验证您的标记.

URI"show_prayer"强烈建议此功能完全是关于获取和显示信息.如果是,则链接是正确的选择(但您应该更改JS以便它发出GET请求而不是POST请求),否则您应该考虑使用表单.

假设链接是正确的前进方式,那么它应该指向比页面顶部更合理的东西.

如果我们将上述内容应用于代码,那么我们会得到类似的结果:

<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处理的数据.