¿Cómo agregar din automáticamente un div usando JQuery?

tengo el siguiente código HTML que muestra 3 cuadros de texto y un botón de complemento:¿Cómo agregar din automáticamente 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>

Cuando el usuario hace clic en el botón Añadir, quiero crear otro div con el id de partidas individuales y ponerlo en la línea siguiente . Creé un archivo js, pero no estoy seguro de cómo hacerlo?

Esto es lo que tengo hasta ahora:

var objetoCuenta = 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'); 
    }); 
});

Fuente

2009-06-04 Xaisoft

Su última creación no funcionará. getLineItem() devuelve un elemento DIV que contiene 3 elementos de cuadro de texto. Debe agregar ese objeto completo al contenedor. Resumen: container.append (getLineItem()) – Ropstah

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

Actualización 2

Crear un botón normal de este modo:

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

actualización ** Esto también se actualiza con los comentarios, etc .. **

//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; 
}

Fuente

2009-06-04 22:20:58 Ropstah

Intenté esto, pero lo que realmente quiero hacer es agregar el div con la línea de pedido id con los 3 cuadros de texto y el botón de imagen, no solo un div vacío. – Xaisoft

Además, cuando realizo una prueba con

Hola

, parpadea en la pantalla pero no se queda. – Xaisoft

Esta es la forma global de agregar elementos. También puede agregar objetos jQuery u objetos de elemento HTML de Javascript. Realmente tienes que crear algo de lógica para determinar los ID de las cajas de texto. Los que aparecen al principio son generados por el framework ASP.NET. Tal vez debería considerar crearlos todos (también el primer elemento de línea) de jQuery. Esto lo ayudará a determinar qué algoritmo usar para determinar los nombres/identificadores de los campos de formulario. – Ropstah

Puede utilizar .append() método o .html()

Fuente

2009-06-04 22:21:25

¿Qué sucede cuando a las ID de asp.net cuando sigo agregando elementos? – Xaisoft

tendrá que poner los identificadores de los elementos como variables –

¿Qué quiere decir exactamente? – Xaisoft

intentar algo como esto:

$(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: necesita cambiar el id.

Fuente

2009-06-04 22:25:49 cletus

me gustó de esta manera mejor que la mía y otras, simple y clara –

cletus es un buen chainer .. Trate de combinar esto con mi ejemplo y ya está listo; – Ropstah

cletus, que funciona , pero el elemento de línea aparece en la pantalla y luego desaparece. Cada vez que hago clic en el botón, también inserta un, en todos los cuadros de texto. – Xaisoft

¿Cómo agregar din automáticamente un div usando JQuery?

Respuesta

Cuestiones relacionadas