javascript - tablas - onclick jquery ejemplos
jQuery cómo vincular el evento onclick al elemento HTML agregado dinámicamente (9)
Quiero vincular un evento onclick a un elemento que inserte dinámicamente con jQuery
Pero nunca ejecuta la función combinada. Me gustaría que me indicaras por qué este ejemplo no funciona y cómo puedo hacerlo funcionar correctamente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
<head>
<title>test of click binding</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function(){
close_link = $(''<a class="" href="#">Click here to see an alert</a>'');
close_link.bind("click", function(){
alert(''hello from binded function call'');
//do stuff here...
});
$(''.add_to_this'').append(close_link);
});
</script>
</head>
<body>
<h1 >Test of click binding</h1>
<p>problem: to bind a click event to an element I append via JQuery.</p>
<div class="add_to_this">
<p>The link is created, then added here below:</p>
</div>
<div class="add_to_this">
<p>Another is added here below:</p>
</div>
</body>
</html>
EDITAR: edité el ejemplo para contener dos elementos en los que se inserta el método. En ese caso, la llamada de alert() nunca se ejecuta. (gracias a @Daff por señalar eso en un comentario)
¿Qué tal el método Live?
$(''.add_to_this a'').live(''click'', function() {
alert(''hello from binded function call'');
});
Aún así, lo que hiciste parece que debería funcionar. Hay otra publicación que se ve bastante similar.
Considera esto:
jQuery(function(){
var close_link = $(''<a class="" href="#">Click here to see an alert</a>'');
$(''.add_to_this'').append(close_link);
$(''.add_to_this'').children().each(function()
{
$(this).click(function() {
alert(''hello from binded function call'');
//do stuff here...
});
});
});
Funcionará porque lo adjunta a cada elemento específico. Es por esto que necesita - después de agregar su enlace al DOM - encontrar una forma de seleccionar explícitamente su elemento agregado como un elemento JQuery en el DOM y vincular el evento click al mismo.
La mejor manera probablemente sea, como se sugirió, vincularla a una clase específica a través del método en vivo.
Creo que la buena manera de hacerlo:
$(''#id'').append(''<a id="#subid" href="#">...</a>'');
$(''#subid'').click( close_link );
El primer problema es que cuando se llama anexar a un conjunto de jQuery con más de un elemento, se crea un clon del elemento a agregar para cada uno y, por lo tanto, se pierde el observador del evento adjunto.
Una forma alternativa de hacerlo sería crear el enlace para cada elemento:
function handler() { alert(''hello''); }
$(''.add_to_this'').append(function() {
return $(''<a>Click here</a>'').click(handler);
})
Otro problema potencial podría ser que el observador del evento se adjunta antes de que el elemento se haya agregado al DOM. No estoy seguro de si esto tiene algo que decir, pero creo que el comportamiento podría considerarse indeterminado. Un enfoque más sólido sería probablemente:
function handler() { alert(''hello''); }
$(''.add_to_this'').each(function() {
var link = $(''<a>Click here</a>'');
$(this).append(link);
link.click(handler);
});
Es posible y algunas veces necesario crear el evento click junto con el elemento. Esto es por ejemplo cuando el enlace basado en selector no es una opción. La parte clave es evitar el problema del que hablaba Tobias al usar .replaceWith() en un solo elemento. Tenga en cuenta que esto es solo una prueba de concepto.
<script>
// This simulates the object to handle
var staticObj = [
{ ID: ''1'', Name: ''Foo'' },
{ ID: ''2'', Name: ''Foo'' },
{ ID: ''3'', Name: ''Foo'' }
];
staticObj[1].children = [
{ ID: ''a'', Name: ''Bar'' },
{ ID: ''b'', Name: ''Bar'' },
{ ID: ''c'', Name: ''Bar'' }
];
staticObj[1].children[1].children = [
{ ID: ''x'', Name: ''Baz'' },
{ ID: ''y'', Name: ''Baz'' }
];
// This is the object-to-html-element function handler with recursion
var handleItem = function( item ) {
var ul, li = $("<li>" + item.ID + " " + item.Name + "</li>");
if(typeof item.children !== ''undefined'') {
ul = $("<ul />");
for (var i = 0; i < item.children.length; i++) {
ul.append(handleItem(item.children[i]));
}
li.append(ul);
}
// This click handler actually does work
li.click(function(e) {
alert(item.Name);
e.stopPropagation();
});
return li;
};
// Wait for the dom instead of an ajax call or whatever
$(function() {
var ul = $("<ul />");
for (var i = 0; i < staticObj.length; i++) {
ul.append(handleItem(staticObj[i]));
}
// Here; this works.
$(''#something'').replaceWith(ul);
});
</script>
<div id="something">Magical ponies ♥</div>
Todos estos métodos están en desuso. Debe usar el método on para resolver su problema.
Si desea orientar un elemento agregado dinámicamente, deberá usar
$(document).on(''click'', selector-to-your-element , function() {
//code here ....
});
esto reemplaza el método .live() desuso.
Un poco tarde para la fiesta, pero pensé que intentaría aclarar algunos conceptos erróneos comunes en los manejadores de eventos de jQuery. A partir de jQuery 1.7, se debe usar .on() lugar del .live() obsoleto .live() , para delegar los manejadores de eventos a los elementos que se crean dinámicamente en cualquier momento después de asignar el controlador de eventos.
Dicho esto, no es un simple cambio de live For live porque la sintaxis es ligeramente diferente:
Nuevo método (ejemplo 1):
$(document).on(''click'', ''#someting'', function(){
});
Método obsoleto (ejemplo 2):
$(''#something'').live(function(){
});
Como se muestra arriba, hay una diferencia. El giro es .on() realidad se puede llamar similar a .live() , pasando el selector a la función jQuery en sí:
Ejemplo 3:
$(''#something'').on(''click'', function(){
});
Sin embargo, sin usar $(document) como en el ejemplo 1, el ejemplo 3 no funcionará para los elementos creados dinámicamente. El ejemplo 3 es absolutamente correcto si no necesita la delegación dinámica.
¿Se debería usar $ (document) .on () para todo?
Funcionará, pero si no necesita la delegación dinámica, sería más apropiado usar el ejemplo 3 porque el ejemplo 1 requiere un poco más de trabajo del navegador. No habrá ningún impacto real en el rendimiento, pero tiene sentido utilizar el método más adecuado para su uso.
¿Debe usarse .on () en lugar de .click () si no se necesita una delegación dinámica?
No necesariamente. Lo siguiente es solo un atajo para el ejemplo 3:
$(''#something'').click(function(){
});
Lo anterior es perfectamente válido y, por lo tanto, se trata de una cuestión de preferencia personal sobre qué método se utiliza cuando no se requiere una delegación dinámica.
Referencias
function load_tpl(selected=""){
$("#load_tpl").empty();
for(x in ds_tpl){
$("#load_tpl").append(''<li><a id="''+ds_tpl[x]+''" href="#" >''+ds_tpl[x]+''</a></li>'');
}
$.each($("#load_tpl a"),function(){
$(this).on("click",function(e){
alert(e.target.id);
});
});
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).on(''click'', ''.close'', function(){
var rowid=''row''+this.id;
var sl = ''#tblData tr[id=''+rowid+'']'';
console.log(sl);
$(sl).remove();
});
$("#addrow").click(function(){
var row='''';
for(var i=0;i<10;i++){
row=i;
row=''<tr id=row''+i+''>''
+ ''<td>''+i+''</td>''
+ ''<td>ID''+i+''</td>''
+ ''<td>NAME''+i+''</td>''
+ ''<td><input class=close type=button id=''+i+'' value=X></td>''
+''</tr>'';
console.log(row);
$(''#tblData tr:last'').after(row);
}
});
});
</script>
</head>
<body>
<br/><input type="button" id="addrow" value="Create Table"/>
<table id="tblData" border="1" width="40%">
<thead>
<tr>
<th>Sr</th>
<th>ID</th>
<th>Name</th>
<th>Delete</th>
</tr>
</thead>
</table>
</body>
</html>