Селекторы jQuery не работают или не могут связывать события

Question

У меня есть несколько динамически создаваемых ссылок и форм на одной странице, названных с идентификаторами 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() { ... });
});

---

В качестве альтернативы, вместо этих идентификаторов начинается с селекторов, вы можете использовать класс, например:

<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 к себе.