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>元素可能不是<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处理的数据。

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

1 个答案: