Come aggiungere dinamicamente un div usando JQuery?

Ho il seguente codice HTML che visualizza 3 caselle di testo e un pulsante Aggiungi:Come aggiungere dinamicamente un div usando JQuery?

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title></title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="container"> 
    <div id="line-item"> 
    <asp:TextBox ID="txtLineNumber" runat="server"></asp:TextBox> 
    <asp:TextBox ID="txtQty" runat="server"></asp:TextBox> 
    <asp:TextBox ID="txtItemCode" runat="server"></asp:TextBox> 
    <asp:ImageButton ID="imgBtnAddNewLineItem" ImageUrl="~/images/add_button.jpg" 
    runat="server" /> 
    </div> 
    </div> 
    </form> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2 
    /jquery.min.js"> 
    </script> 
    <script src="js/invoice.js" type="text/javascript"></script> 
</body> 
</html>

Quando l'utente fa clic sul pulsante Aggiungi, voglio creare un altro div con la linea-item id e metterlo nella riga successiva . Ho creato un file js, ma non sono sicuro di come farlo?

Ecco quello che ho finora:

var ItemCount = 0;

function getLineItem(number) { 
    var div = document.createElement('div'); 

    $(div).attr("id", "lineitem" + number); 
    var t1 = getTextbox("txt" + number.toString() + "1"); 
    var t2 = getTextbox("txt" + number.toString() + "2"); 
    var t3 = getTextbox("txt" + number.toString() + "3"); 

    $(div).append(t1); 
    $(div).append(t2); 
    $(div).append(t3); 

    return $(div); 
} 

function getTextbox(id) { 
    var textbox = document.createElement('input'); 
    $(textbox).attr("id", id); 
    return $(textbox); 
} 


var lineItemCount = 0; 

    $('#imgBtnAddNewLineItem').click(function() { 

    lineItemCount++; 

    $('#line-item').clone().attr('id',getLineItem(lineItemCount)).appendTo('#container'); 
    }); 
});

fonte

2009-06-04 Xaisoft

La tua ultima creazione non funzionerà. getLineItem() restituisce un elemento DIV che contiene 3 elementi textbox. Dovresti aggiungere l'intero oggetto al contenitore. Abstract: container.append (getLineItem()) – Ropstah

$(document).ready(function() { 
    $('#imgBtnAddNewLineItem').click(function() { 
     $('#container').append('<div></div>'); 
    }); 
});

Update 2

Creare un normale pulsante in questo modo:

<input type="button" id="imgBtnAddNewLineItem" value="Add lineitem" />

Aggiornamento ** Questo è aggiornata con commenti ecc .. **

//Count the lineItems to make sure they are unique 
var lineItemCount = 0; 

//On document ready 
$(document).ready(function() { 
    //On button click 
    $('#imgBtnAddNewLineItem').click(function(e) { 
     /* 
      ADD THE FOLLOWING LINE TO PREVENT THE POSTBACK 
      P.S. - Make sure you pass -e- to this function... 

     */ 
     e.preventDefault(); 



     //Increase the lineitemcount 
     lineItemCount++; 
     //Add a new lineitem to the container, pass the lineItemCount to make sure getLineItem() can generate a unique lineItem with unique Textbox ids 
     $(container).append(getLineItem(lineItemCount)); 
    }); 
}); 

//Create a new DIV with Textboxes 
function getLineItem(number) { 
    var div = document.createElement('div'); 
    //Give the div a unique id 

    div.setAttribute('id','lineitem_' + number); 

    //pass unique values to the getTextbox() function 
    var t1 = getTextbox('txt_' + number + '_1'); 
    var t2 = getTextbox('txt_' + number + '_2'); 
    var t3 = getTextbox('txt_' + number + '_3'); 

    div.appendChild(t1); 
    div.appendChild(t2); 
    div.appendChild(t3); 

    return div; 
} 

//Create a textbox, make sure the id passed to this function is unique... 
function getTextbox(id) { 
    var textbox = document.createElement('input'); 
    textbox.setAttribute('id',id); 
    textbox.setAttribute('name',id); 
    return textbox; 
}

.210

fonte

2009-06-04 22:20:58 Ropstah

Ho provato questo, ma quello che in realtà voglio fare è aggiungere il div con la riga di identificazione id con le 3 caselle di testo e il pulsante immagine, non solo un div vuoto. – Xaisoft

Inoltre, quando eseguo un test con

Hello

, lampeggia sullo schermo ma non rimane. – Xaisoft

Questo è globalmente come si aggiungono gli articoli. Puoi anche aggiungere oggetti jQuery o oggetti JavaScript HTML Element. Devi davvero creare una logica per determinare gli ID della casella di testo. Quelle che appaiono inizialmente sono generate dal framework ASP.NET. Forse dovresti considerare di crearli tutti (anche il primo elemento di riga) da jQuery. Questo ti aiuterà a determinare quale algoritmo usare per determinare i nomi/id dei campi di battaglia. – Ropstah

È possibile utilizzare .append() metodo o .html()

fonte

2009-06-04 22:21:25

Cosa succede quando agli ID di asp.net quando continuo ad aggiungere elementi? – Xaisoft

dovrai inserire gli id degli elementi come variabili –

Cosa intendi esattamente? – Xaisoft

provare qualcosa di simile:

$(document).ready(function() { 
    $('#imgBtnAddNewLineItem').click(function() { 
    var container = $("#container"); 
    var line = $('#line-item').clone().attr("id", "line-item-2") 
    var lineCount = container.children().length + 1; 
    line.attr("id", line.attr("id") + "-" + lineCount); 
    line.find(":text").each(function() { 
     // IDs need to be unique 
     $(this).attr("id", $(this).attr("id") + "-" + lineCount); 
     $(this).attr("name", $(this).attr("name") + "-" + lineCount); 
     // clear the value since we're cloning a line that may have values in it 
     $(this).val(""); 
    }); 
    container.append(line); 
    }); 
});

Nota: è necessario modificare l'id.

fonte

2009-06-04 22:25:49 cletus

mi è piaciuto in questo modo meglio del mio e di altri, semplice e chiaro –

il cletus è un buon chainer .. Prova a combinare questo con il mio esempio e sei pronto per andare;) – Ropstah

cletus, che funziona , ma l'elemento pubblicitario viene visualizzato sullo schermo e quindi scompare. Ogni volta che clicco sul pulsante, inserisce anche un, in tutte le caselle di testo. – Xaisoft

Come aggiungere dinamicamente un div usando JQuery?

risposta

Problemi correlati