jQuery 选择器不起作用或无法绑定事件

Question

我在一个页面上有几个动态创建的链接和表单，分别以 ID sub_comment_form_[id] 和 sub_add_comment_[id] 命名。我正在尝试：

1. 页面加载时隐藏所有表单
2. 将单击事件绑定到表单正上方的链接以隐藏/显示表单。

我不确定我的选择器是否有问题，或者 jQuery 是否根本不允许同时绑定多个对象。这是我的代码：

HTML

<a href="#" id="sub_add_comment_to_answer_[id]">Add comment</a>
<form id="sub_comment_form_to_answer_[id]"...

jQuery

$("form[ @id^='sub_comment_form' ]").hide();

$("a[ @id^='sub_add_comment' ]").click(function() {
  var sibform = $(this).next("form");

  if (sibform.is(':hidden')) {
    $(this).text('Cancel');
    sibform.slideDown('fast');
  } else {
    $(this).text('Add comment');
    sibform.slideUp('fast');
  }
});

Answer 1

如果您使用的是较新版本的 jQuery (1.3+)，则属性选择器上不再有 @，它看起来像这样：

$("form[id^='sub_comment_form']").hide();
//and..
$("a[id^='sub_add_comment']").click(function() {

第一个也缺少右大括号，因此请务必修复也是如此 :)

另外，请确保这两个都包装在 document.ready 处理程序中，以便它们在 DOM 准备好后执行，如下所示：

$(function() {
  $("form[id^='sub_comment_form']").hide();
  $("a[id^='sub_add_comment']").click(function() { ... });
});

---

或者，您可以代替这些 ID 开头的选择器例如，使用一个类：

<a href="#" class="addComment">Add comment</a>

并像这样绑定它：

  $("a.addComment").click(function() { ... });

Answer 2

第 1 行缺少结束符“]”，所以应该是......

$("form[@id^='sub_comment_form']").hide();

Answer 3

在包含 jQuery 对象的变量前添加 $ 也是一个好习惯。

var $sibform = $(this).next("form");

这样你就总能知道你什么时候在处理 jQuery 对象，什么时候没有。从而阻止您在其本身绑定 jQuery 对象。