添加和删除动态文本框

我有以下代码将文本区域添加到我的页面。它还附加一个“删除”按钮，以便用户可以删除文本区域。问题是，当用户单击文本区域中的任意位置的删除按钮时，文本区域被删除......我不知道为什么会发生这种情况。添加和删除动态文本框

有人可以快速浏览我的代码吗？也许我错过了一些东西。

谢谢！

$("#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

添加和删除动态文本框

回答

相关问题