如何添加一個buttton2，同時點擊另一個按鈕1和按鈕3，同時點擊按鈕2

在下面的jquery文件中，當我點擊添加按鈕時，它創建一個文本框與一個按鈕後，我單擊addbutton它創建另一個文本框與按鈕.... ......但是，我想要的是，當我cllick第一按鈕將其添加第二個按鈕，然後我點擊第二按鈕將其添加第三個按鈕.....但我doknow怎麼辦..如何添加一個buttton2，同時點擊另一個按鈕1和按鈕3，同時點擊按鈕2

$(document).ready(function() { 
    var counter = 2; 

    $("#addButton").click(function() { 
    if (counter > 10) { 
     alert("Only 10 textboxes allow"); 
     return false; 
    } 

    var newTextBoxDiv = $(document.createElement('div')) 
     .attr("id", 'TextBoxDiv' + counter); 

    newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' + 
     '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >' + 
     ' <input type="button" value="Add Button" id="addButton">'); 

    newTextBoxDiv.appendTo("#TextBoxesGroup"); 
    counter++; 
    }); 

    $("#removeButton").click(function() { 
    if (counter == 1) { 
     alert("No more textbox to remove"); 
     return false; 
    } 

    counter--; 
    $("#TextBoxDiv" + counter).remove(); 
    });  
});

來源

2016-09-29 Karthiga

標識是HTML是唯一的。你使用addButton和addtextbox id在你的情況下多次添加。這就是您的代碼無法按預期工作的原因。 –

哦謝謝..但我怎麼得到這個沒有使用id .. – Karthiga

使用常見的類和綁定點擊類，並生成文本框和按鈕。它會起作用。 –

重複的ID無效HTML和幾乎總是引起腳本問題。儘可能避免。
您使用的click（）綁定稱爲「直接」綁定，它只會將處理程序附加到已存在的元素。它不會被綁定到未來創建的元素上。要做到這一點，你必須使用on（）創建一個「委託」綁定。更多細節：http://api.jquery.com/on/

您的樣本：

$(document).ready(function(){ 
 

 
    var counter = 2; 
 

 
\t \t $(document.body).on('click', ".addButton", function(){ 
 

 
    if(counter>10){ 
 
      alert("Only 10 textboxes allow"); 
 
      return false; 
 
    } 
 

 
    var newTextBoxDiv = $(document.createElement('div')) 
 
     .attr("id", 'TextBoxDiv' + counter); 
 

 
    newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' + 
 
      '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >' + 
 
      ' <input type="button" value="Add Button" class="addButton" id="button' + counter + '">'); 
 

 
    newTextBoxDiv.appendTo("#TextBoxesGroup"); 
 
    $(this).attr("disabled", "disabled"); 
 

 
    counter++; 
 
    }); 
 

 
    $(".removeButton").click(function() { 
 
    if(counter==1){ 
 
      alert("No more textbox to remove"); 
 
      return false; 
 
    } 
 

 
    counter--; 
 

 
     $("#TextBoxDiv" + counter).remove(); 
 
     $("#button" + (counter - 1)).attr("disabled", false); 
 
     if(counter==2){ 
 
      $(".addButton").attr("disabled", false); 
 
     } 
 

 
    }); 
 

 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="buttons"> 
 
    <input class="addButton" type="button" value="Add Button" /> 
 
    <input class="removeButton" type="button" value="Remove Button" /> 
 
</div> 
 
<div id="TextBoxesGroup"></div>

來源

2016-09-29 11:13:49

感謝您的幫助...它工作正常 – Karthiga

我想要刪除按鈕也相同functionallity .. – Karthiga

刪除按鈕已經在我的代碼段中工作。你想在添加按鈕旁邊的每個創建的組上添加刪除按鈕嗎？請在https://jsfiddle.net/上分享您的代碼，以便您更好地理解它。 –

您可能試試這個：

此行$(obj).attr("disabled", "disabled");到禁用clicke d按鈕。你可以跳過。

function createButton(obj){ 
 
    var $input = $('<input type="button" value="Add Button" onclick="createButton(this);">'); 
 
    $input.appendTo($("#buttons")); 
 
    $(obj).attr("disabled", "disabled"); // use it to disable clicked btn 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="buttons"> 
 
    <input type="button" value="Add Button" onclick="createButton(this);"> 
 
</div>

來源

2016-09-29 10:36:07 AHJeebon

如何添加一個buttton2，同時點擊另一個按鈕1和按鈕3，同時點擊按鈕2

回答

相關問題