添加和刪除動態文本框

我有以下代碼將文本區域添加到我的頁面。它還附加一個「刪除」按鈕，以便用戶可以刪除文本區域。問題是，當用戶單擊文本區域中的任意位置的刪除按鈕時，文本區域被刪除......我不知道爲什麼會發生這種情況。添加和刪除動態文本框

有人可以快速瀏覽我的代碼嗎？也許我錯過了一些東西。

謝謝！

$("#btnAddTools").click(function() { 
     if(counter>10){ 
      alert("Only 10 learning Tools allowed per page."); 
      return false; 
     } 

     var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Tools' + counter); 
     newTextBoxDiv.after().html(
       "<label></label>" + 
       "<textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'></textarea>" + 

       '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools">').click(function() { 
        $(this).remove(); 
        counter--; 
       }); 
     newTextBoxDiv.appendTo("#ToolsGroup"); 
     counter++; 
    });

來源

2013-04-11 SkyeBoniwell

請提供的jsfiddle eample。 – 2013-04-11 14:17:57

什麼是jsfiddle示例？謝謝 – SkyeBoniwell 2013-04-11 14:20:11

不要忘記標記一個問題作爲答案！謝謝。 – Jordan 2013-04-11 15:04:36

有了這個代碼：

newTextBoxDiv.after().html(
      "<label></label>" + 
      "<textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'> </textarea>" + 

      '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools">').click(function() {

你申請的點擊功能按鈕，標籤和整個文本區域。

一個解決方法是創建一個單獨的函數，並在代碼中使用onClick按鈕。

事情是這樣的：

newTextBoxDiv.after().html(
     "<label></label>" + 
     "<textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'> </textarea>" + 

     '&nbsp;&nbsp;<input type="button" value="Remove" onClick="functionName(param)" class="removeTools">');

然後有一個單獨的功能：

function functionName(param) { 
    //code 
}

來源

2013-04-11 14:20:09 Jordan

哦...我只是想讓按鈕具有點擊功能... – SkyeBoniwell 2013-04-11 14:21:01

您可以使用此代碼

var counter=0; 
$("#btnAddTools").click(function() { 
    if(counter>10){ 
     alert("Only 10 learning Tools allowed per page."); 
     return false; 
    } 

    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Tools' + counter); 
    newTextBoxDiv.after().html(
      "<label></label>" + 
      "<textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'></textarea>" + 

      '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools">'); 
    newTextBoxDiv.appendTo("#ToolsGroup"); 
    counter++; 
}); 
$(document).on('click','.removeTools'.function(){ 
    $(this).prev().remove(); 
});

來源

2013-04-11 14:23:56

在你的代碼的問題是，你加入單擊事件到整個新添加的html。

查收新代碼

var counter = 0; 
$("#btnAddTools").click(function() { 
    if (counter > 10) { 
     alert("Only 10 learning Tools allowed per page."); 
     return false; 
    } 

    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'Tools' + counter); 
    newTextBoxDiv.after().html(
     "<label></label>" + 
     "<textarea id='tbTools'" + counter + "' name='txtTools' rows='3' cols='50'></textarea>" + 

     '&nbsp;&nbsp;<input type="button" value="Remove" class="removeTools" onclick="removeTextArea(this);">'); 
    newTextBoxDiv.appendTo("#ToolsGroup"); 
    counter++; 
}); 

function removeTextArea(textAreaElement) { 
    $(textAreaElement).parent().remove(); 
    counter--; 
}

來源

2013-04-11 14:24:39

這不起作用，當我點擊刪除按鈕時什麼都沒有發生 – SkyeBoniwell 2013-04-11 15:04:31

添加和刪除動態文本框

回答

相關問題