關於選擇表格兒童jquery的問題

Question

我再次詢問有關評論表單的問題，我正在制作一個圖片網站，每個圖片都有自己的評論表單，所以當我提交表單時，我喜歡這樣：

$('#comment_form').live('submit', function() {
 ...

所以為了只選擇這種形式的textearea值我嘗試使用這個，但我得到未定義的錯誤這里是我嘗試的方式：

$('#comment_form').live('submit', function() {
 image_comment_text=$(this).closest("#comment_text").val(); //textarea id is comment_text

我試圖使用find（），它的工作，但當我提交幾個圖像的評論時，我得到2或3次評論，因為我發現所有出現的textarea與comment_text id ..我怎么能這樣做？

@molf，這里是javascript生成的HTML：

var xHTML = "<div class=\"addComment\">";
   xHTML += "<form action=\"<?=base_url()?>images/post_comment/" + post + "\" method=\"post\" class=\"comment_form\" name=\"comment_form\">";
   xHTML += "<input type=\"hidden\" class=\"comment_post_id\" name=\"comment_post_id\" value=\"" +post + "\"/>"; 
   xHTML += "<textarea class=\"comment\" name=\"comment_text\" rows=\"8\" cols=\"40\"></textarea>";
      xHTML += "<input type=\"submit\" name=\"submit\" class=\"post_image_comment\" value=\"Comment\"><span> Don't make it too big!</span>";
   xHTML += "</form></div>";

編輯

當我打印到控制台記錄textarea的值時，我只得到一個結果，現在當我嘗試追加ul注釋時，我得到2個相同的值..這里是怎么回事..

<ul class="comments"></ul> 

下面是評論表單，根本不在文檔中，當單擊某個錨時，表單彈出以下.comments ，當表單提交時我想附加注釋以添加新注釋以列出現有無序列表注釋的列表項，這是整個代碼：

$('form[name^="comment_form"]').live('submit', function(event) {
  r= $(this).find('> .comment').val();

                $('<div class="overlay"></div>')
    .appendTo('.addComment')
             .fadeIn(200, function() {
          $('.comments')
             .append('<li id="new_append">' + r + '</li>')
              .children(':last')
           .height($('.comments li:last').height())
           .hide()
           .slideDown(800, function() { 
             var bodyHeight = $('html').height();
            $('.addComment').fadeOut(500, function() {
              $('html').height(bodyHeight);
           $('h2#leaveAComment').fadeOut(200, function(){$(this).text('Thank you for your comment!').fadeIn(200)});
          });
         });  
        $('html, body').scrollTo( $('#new_append'), 800 );
        });
    event.preventDefault();
            }); 

編輯II @patrick

加載評論表單的javascript在上面..這里是HTML：

-------------每個開始--------------

<div id="image-12" class="image_content">
<img src="..." />
 <ul class="comments hidden"> //This is where the comments are appended to <li></li>

 </ul>

<div style="float: left; display: block; width: 100%;">
<a id="image_comment-12" class="image_comment" onclick="showComments('12');" href="javascript:;">Add Comment</a>
</div>

  <div id="addComment-12">//this is where the comment form loads

  </div>

</div>

----------結束---每個---------圖片......

Answer 1

首先，更改表單的選擇器。 我認為您可以使用id選擇器按名稱選擇表單，但是您不應該在頁面上復制id，因此jQuery live可能只是在觀看第一個表單。 但這只是猜測。

此外，您使用textarea的類/ ID無關緊要。 如果每個表單只有一個textarea，則可以使用:text選擇器。 在尋找孩子時，我喜歡使用兒童選擇器。

$('form[name="comment_form"]').live('submit', function() {
  image_comment_text = $(this).find('> :text').val();
});

如果您使用的是name而不是id，因為您將有多個表單，我建議將名稱更改為comment_form_'image_id'，然后您的選擇器將為： $('form[name^="comment_form"]')
注意^需要名稱以'comment_form'開頭。 這樣，您可以擁有唯一的表單名稱（comment_form_234，comment_form_235）並仍然具有所需的效果。

編輯：

我看了你的代碼更新，它看起來像你忽略了函數中當前表單的上下文。 例如，當你使用選擇器$('.comments').append(...你附加到頁面上與該選擇器匹配的所有元素。為了檢索正確的元素，你必須總是使用您的選擇器作為$(this).find(' > .comments').append(...將在提交的表單的上下文中工作。

我花了幾分鍾編輯你的代碼，我沒有運行它或任何東西，但它應該接近你想要做的。 我希望它至少讓你開始朝着正確的方向前進：

$('form[name^="comment_form"]').live('submit', function (event) {
    r = $(this).find('> .comment').val();
    /* get addComment-classed element */
    var addComment = $(this).find(' > .addComment:first');

    /* get comments-classed element */
    var comments = $(this).find(' > .comments:first');

    $('<div class="overlay"></div>').appendTo(addComment).fadeIn(200, function () {
        /* note comments element, not selector */
        $(comments).append('<li id="new_append">' + r + '</li>').children(':last').height(
        /* again, element */
        $(comments).find(' > li:last').height()).hide().slideDown(800, function () {
            var bodyHeight = $('html').height();

            /* again, element */
            $(addComment).fadeOut(500, function () {
                $('html').height(bodyHeight);
                $('h2#leaveAComment').fadeOut(200, function () {
                    $(this).text('Thank you for your comment!').fadeIn(200)
                });
            });
        });
        $('html, body').scrollTo($('#new_append'), 800);
    });
    event.preventDefault();
});

我在代碼中添加了注釋，但請注意addComments和注釋選擇器是“緩存”的。 如果您要多次訪問這些元素，在使用它們之前將它們存儲在變量中將減少DOM遍歷。 這應該可以解決您的評論被添加到頁面上的多個元素的問題。

Answer 2

首先，如果在適當的上下文中使用，find（）方法是正確的方法。

其次，聽起來你正在重新使用ID。 這是不允許的。 ID只能在頁面上使用一次。

nearest（）函數從（或包括）DOM元素中搜索“up”。 find（）函數搜索元素的內容。

編輯：

我假設用戶單擊提交按鈕時正在提交表單。 我還假設你的submit()處理程序比顯示的更多。 那是對的嗎？

有時您需要添加$(this).preventDefault(); 為了防止在您的代碼中提交表單，以及“提交”按鈕的默認行為。

以下（基本上）與find（）完成相同的事情。 它將在提交的表單中找到帶有.comment_text類的項目。 所以它應該只抓取一個項目的值：

image_comment_text=$(".comment_text", this).val();

Answer 3

你在每個頁面上有多少個comment_form ？ 對於正確的HTML，每頁只應有一個id ='comment_text'和一個id ='comment_form'。

考慮將您的ID更改為class ='comment_text'並使用.comment_text而不是#comment_text進行查找

---

我認為，根據您的最新評論，問題可能是您將表單/評論文本框動態添加到頁面的方式。

輸入評論並提交后，您是否刪除了動態添加的表單？ 我會推薦這個，好像不是我認為你的DOM結構變得混亂導致你遇到的問題。

Answer 4

您將收到重復的評論，因為您沒有刪除以前的添加評論表單。 嘗試將此添加到.slideDown回調函數的末尾：

$(this).remove();

這是完整的提交功能，我做了一些更改/添加：

• 我從find('.comment')刪除了> ，因為沒有必要
• 將新附加更改為類，然后在滾動到它后將其刪除。
• 完成后刪除表單
• 更改了event.preventDefault(); return false; ......這比個人更喜歡個人偏好。

我希望這有幫助 ：）

 $('form[name^="comment_form"]').live('submit', function(event) {
  r = $(this).find('.comment').val();
  $('<div class="overlay"></div>')
   .appendTo('.addComment')
   .fadeIn(200, function() {
    $('.comments')
     .append('<li class="new_append">' + r + '</li>')
     .children(':last')
     .height($('.comments li:last').height())
     .hide()
     .slideDown(800, function() {
      var bodyHeight = $('html').height();
      $('.addComment').fadeOut(500, function() {
       $('html').height(bodyHeight);
       $('h2#leaveAComment').fadeOut(200, function(){$(this).text('Thank you for your comment!').fadeIn(200)});
       $(this).remove();
      });
     });
     $('html, body').scrollTo( $('.new_append:last'), 800 );
     $('.new_append').removeClass('new_append');
   });
  return false;
 });