如何使用jquery添加按鈕之前的<textarea>

我有一個簡單的「新聞文章」列表，我希望可以用於評論。我創建了一個「添加評論」按鈕。如何使用jquery添加按鈕之前的<textarea>

我希望按鈕創建一個<form>與<textarea>緊接在點擊按鈕之前，並在點擊按鈕後立即創建一個「取消」按鈕。（我提出了這個問題，同時提出這個問題）

唯一剩下的就是我希望「取消」按鈕刪除新創建的<textarea>和它自己點擊。另外，如何防止「添加評論」按鈕製作多個空白的「textareas」？

$(document).ready(function(){ 
 
\t $(".AddComment").click(function() { 
 
\t  $("<form><textarea name='ResearchUpdate' placeholder='Enter your comment here' rows='3' cols='40' class='Commentary'></textarea> </form>").insertBefore(this); 
 
\t  $("<button class='CancelComment'>Cancel</button>").insertAfter(this); 
 
\t }); 
 
\t 
 
\t $(".CancelComment").click(function(){ 
 
\t \t $(this).prev(".Commentary").remove(); 
 
\t \t $(this).remove(); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>News Entries</title> 
 

 
</head> 
 
<body> 
 

 
<h2><a href="#">Killer Rabbit On The Loose</a></h2> 
 
<p>Date: 01/23/2015</p> 
 
<p>Author: Bobert</p> 
 
<p>Subject: Animals</p> 
 
<p>Most Recent Comment: None Yet.</p> 
 
<button class="AddComment">Add Comment</button> 
 

 
<h2><a href="#">Porsche Unveils Ultra Fast Minivan</a></h2> 
 
<p>Date:02/14/2015</p> 
 
<p>Author: Jimmy</p> 
 
<p>Subject: Cars</p> 
 
<p>Most Recent Comment:</p> 
 
<p>This is genius on Porsche's behalf! I can drop off the kids at school, go grocery shopping and still have time to go racing with my buddies. All without worrying that my emissions aren't falsified and polluting the world. --SemiProRacer997</p> 
 
<button class="AddComment">Add Comment</button> 
 

 

 
<h2> <a href="#">Apple Releases iPhone Inifity</a></h2> 
 
<p>Date:03/11/2015</p> 
 
<p>Author: Frank</p> 
 
<p>Subject: Technology</p> 
 
<p>Most Recent Comment:</p> 
 

 
<button class="AddComment">Add Comment</button> 
 

 

 
</body> 
 
</html>

來源

2015-12-08 wizkid

<script type="text/javascript"> 
    $('.AddComment').one('click',function(e){ 
     e.preventDefault(); 
     var bt=$(this); 
     var el=$('<textarea name="comment" />'); 
     el.insertBefore(this); 
     bt.text('Send comment').on('click',function(e){ 
      if (el.val().length==0){ 
       alert("Please fill the comment before send."); 
       el.focus(); //Delete this row if you don't want user to focus on the textarea. 
       return false; 
      } 
      $.ajax({ 
       type: 'POST', 
       data : el, 
       cache: false, 
       url: 'postUrl.php', 
       success: function(data){ 
        bt.after($('<b>Comment sent</b>').hide().fadeIn()); 
        bt.add(el).hide(); 

       } 
      }) 
     }) 
    }) 
</script>

來源

2015-12-08 16:37:12 Vixed

使用** **一個創建textarea的（一次性），比綁定提交事件。 – Vixed

我試圖建立你的建議，因爲最終我想通過ajax提交這些信息。我如何確保未創建多個textareas，並且最終如何在textarea中有文本時運行ajax？ – wizkid

我在代碼中使用了一個，以防止創建多個textarea。 ajax調用已經在代碼中，只需將'postUrl.php'更改爲需要接收數據的url即可。 – Vixed

這是更好地顯示和隱藏已有的項目，不是動態創建和插入他們。

$(".AddComment").click(function() { 
    $("<form><textarea name='ResearchUpdate' placeholder='Enter your comment here' rows='3' cols='40' class='Commentary'></textarea> </form>").insertBefore(this); 
    $("<button class='CancelComment'>Cancel</button>").insertAfter(this); 
    // Remove the click event and disable the button. 
    $(this).off("click").prop("disabled", true); 
});

我提出的解決方案：

確保您加載的評論框與每一個崗位有

不使添加評論超過一個textarea的附加題類.comment-box和style="display: none;"並使用以下事件處理程序。
$(".AddComment").click(function() { 
    $(this).prev(".comment-box").toggle(); 
}); 
此外，您還可以有cancel按鈕有以下事件處理程序：
$(".cancel").click(function() { 
    $(this).closest(".AddComment").hide(); 
}); 

來源

2015-12-08 16:23:47

最好的解決辦法是在一個div容器每一個崗位的物品包裹，使我們可以使用一個CSS類以後用於jQuery選擇。

<div class="postItem"> 
    <h2><a href="#">Killer Rabbit On The Loose</a></h2> 
    <p>Date: 01/23/2015</p> 
    <p>Author: Bobert</p>  
    <button class="AddComment">Add Comment</button> 
</div> 

<div class="postItem"> 
    <h2><a href="#">Second post</a></h2> 
    <p>Date: 01/23/2015</p> 
    <p>Author: Shyju</p>  
    <button class="AddComment">Add Comment</button> 
</div>

而在你的取消按鈕點擊事件，得到div容器，找到形式和取消按鈕，將其取下，

$(document).on("click",".CancelComment",function (e){ 

    var _this = $(this); 
    _this.closest(".postItem").find("form").remove(); 
    _this.remove();  

});

工作樣本here

你需要使用jQuery on方法綁定取消按鈕上的點擊事件，因爲它們是由您的代碼動態創建並注入DOM。

來源

2015-12-08 16:26:05 Shyju

我已經有了它的形式，但它已隱藏，所以當你點擊按鈕它出現。您可以使用$('#buttonId').prop('disabled', true);

這將阻止任何進一步的點擊，儘管無論如何點擊無關緊要，因爲您只有一個窗體可以顯示，所以不會再彈出。

點擊取消按鈕應該解僱一個功能，刪除了相關textarea的內容，隱藏表單/ textarea的和重新啓用的評論按鈕

show_comment：

function show_comment(){<br> 
&nbsp;&nbsp;&nbsp;&nbsp;$('#formId').show();<br> 
&nbsp;&nbsp;&nbsp;&nbsp;$('#cancelButton').show();<br> 
&nbsp;&nbsp;&nbsp;&nbsp;$('#commentButton').prop('disabled', true)<br> 
}

remove_comment：

function remove_comment(){<br> 
&nbsp;&nbsp;&nbsp;&nbsp;$('#textareaId').html('');<br> 
&nbsp;&nbsp;&nbsp;&nbsp;$('#commentButton').prop('disabled', false);<br> 
&nbsp;&nbsp;&nbsp;&nbsp;$('#cancelButton').hide(); 

}

來源

2015-12-08 16:27:26 Steelone

問題在你的代碼。

您正在添加頁面加載時不存在的取消按鈕的點擊功能。添加取消按鈕後，您必須添加點擊
您正在做取消按鈕上的prev（），這是錯誤的。取消按鈕的prev兄弟是添加評論按鈕，而不是文本區域。

請參閱下列代碼是否修復您的問題。我也禁用添加按鈕即可添加註釋文本區域，以便您不添加更多的文本區域

$(document).ready(function(){ 
 
\t $(".AddComment").click(function() { 
 
      var $addCommentBtn = $(this), 
 
       $commentTextArea; 
 
      $addCommentBtn.prop("disabled", true); 
 
\t  $commentTextArea = $("<form><textarea name='ResearchUpdate' placeholder='Enter your comment here' rows='3' cols='40' class='Commentary'></textarea> </form>").insertBefore(this); 
 
\t  $("<button class='CancelComment'>Cancel</button>").insertAfter(this).click(function(){ 
 
\t \t $commentTextArea.remove(); 
 
\t \t $(this).remove(); 
 
       $addCommentBtn.prop("disabled", false); 
 
\t  }); 
 
\t }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>News Entries</title> 
 

 
</head> 
 
<body> 
 

 
<h2><a href="#">Killer Rabbit On The Loose</a></h2> 
 
<p>Date: 01/23/2015</p> 
 
<p>Author: Bobert</p> 
 
<p>Subject: Animals</p> 
 
<p>Most Recent Comment: None Yet.</p> 
 
<button class="AddComment">Add Comment</button> 
 

 
<h2><a href="#">Porsche Unveils Ultra Fast Minivan</a></h2> 
 
<p>Date:02/14/2015</p> 
 
<p>Author: Jimmy</p> 
 
<p>Subject: Cars</p> 
 
<p>Most Recent Comment:</p> 
 
<p>This is genius on Porsche's behalf! I can drop off the kids at school, go grocery shopping and still have time to go racing with my buddies. All without worrying that my emissions aren't falsified and polluting the world. --SemiProRacer997</p> 
 
<button class="AddComment">Add Comment</button> 
 

 

 
<h2> <a href="#">Apple Releases iPhone Inifity</a></h2> 
 
<p>Date:03/11/2015</p> 
 
<p>Author: Frank</p> 
 
<p>Subject: Technology</p> 
 
<p>Most Recent Comment:</p> 
 

 
<button class="AddComment">Add Comment</button> 
 

 

 
</body> 
 
</html>

來源

2015-12-08 16:55:08 shinobi

如何使用jquery添加按鈕之前的<textarea>

回答

相關問題