usar jQuery clic para manejar el ancla onClick()

Question

que tienen un conjunto de etiquetas de anclaje generadas dinámicamente en un bucle de la siguiente manera:

<div id = "solTitle"> <a href = "#" id = "' + tagId + '" onClick = "openSolution();"> ' + solTitle + '</a></div> <br>'; 

Una vez que se ejecuta este código de la salida html para uno de los casos se vería como:

<div id = "solTitle"> <a href = "#" id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br> 

<div id = "solTitle"> <a href = "#" id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br> 

Ahora quiero que se muestren diferentes textos al hacer clic en los enlaces de arriba. openSolution() tiene el siguiente aspecto:

function openSolution() { 
    alert('here'); 
    $('#solTitle a').click(function(evt) { 
     evt.preventDefault(); 
     alert('here in'); 
     var divId = 'summary' + $(this).attr('id'); 

     document.getElementById(divId).className = ''; 

    }); 
} 

Cuando ejecuto y haga clic en cualquiera de los enlaces, el flujo doesnot vienen dentro del manejador de jQuery clic. Lo revisé por las alertas anteriores usadas. Solo muestra la alerta: 'aquí' y no la alerta 'aquí dentro'. Al hacer clic en el enlace por segunda vez, todo funciona perfectamente con el valor correcto de divId.

Answer 1

La primera vez que haga clic en el enlace, se ejecuta la función openSolution. Esa función vincula el controlador de eventos click al enlace, pero no lo ejecutará. La segunda vez que haga clic en el enlace, se ejecutará el controlador de eventos click.

Lo que está haciendo parece ser una especie de derrota en el uso de jQuery en primer lugar. ¿Por qué no acaba de unirse al evento de clic a los elementos en el primer lugar:

$(document).ready(function() { 
    $("#solTitle a").click(function() { 
     //Do stuff when clicked 
    }); 
}); 

De esta manera no es necesario onClick atributos en sus elementos.

También parece que tiene varios elementos con el mismo valor id ("solTitle"), que no es válido. Necesitaría encontrar alguna otra característica común (class suele ser una buena opción). Si cambia todas las apariciones de id="solTitle"-class="solTitle", a continuación, puede utilizar un selector de clase:

$(".solTitle a") 

Desde duplicados id valores no son válidos, el código no funciona como se espera cuando se enfrentan a múltiples copias de la misma id. Lo que suele ocurrir es que se utiliza la primera aparición del elemento con ese id, y todos los demás se ignoran.

Answer 2

No puede tener varias veces la misma ID para los elementos. Está destinado a ser único.

utilizar una clase y crea sus identificadores únicos:

<div class="solTitle" id="solTitle1"> <a href = "#" id = "solution0" onClick = "openSolution();">Solution0 </a></div> 

y utilizar el selector de clase:

$('.solTitle a').click(function(evt) { 

    evt.preventDefault(); 
    alert('here in'); 
    var divId = 'summary' + this.id.substring(0, this.id.length-1); 

    document.getElementById(divId).className = ''; 

}); 

Answer 3

está asignando un evento onclick dentro de una función. Eso significa que una vez que la función se ha ejecutado una vez, el segundo evento onclick también se asigna al elemento.

O bien asigna la función onclick o utiliza jquery click().

No hay necesidad de tener tanto

Answer 4

<div class = "solTitle"> <a href = "#" id = "solution0" onClick = "openSolution();">Solution0 </a></div> <br> 

<div class= "solTitle"> <a href = "#" id = "solution1" onClick = "openSolution();">Solution1 </a></div> <br> 



$(document).ready(function(){ 
    $('.solTitle a').click(function(e) { 
     e.preventDefault(); 
     alert('here in'); 
     var divId = 'summary' +$(this).attr('id'); 

     document.getElementById(divId).className = ''; /* or $('#'+divid).removeAttr('class'); */ 

    }); 
}); 

me cambiaron algunas cosas:

1. quitar el attr onclick y el evento se unen clic dentro del document.ready
2. cambió solTitle ser una identificación para una clase: Identificación del canto se repite

Answer 5

El HTML debe ser similar:

<div class="solTitle"> <a href="#" id="solution0">Solution0 </a></div> 
<div class="solTitle"> <a href="#" id="solution1">Solution1 </a></div> 

<div id="summary_solution0" style="display:none" class="summary">Summary solution0</div> 
<div id="summary_solution1" style="display:none" class="summary">Summary solution1</div> 

Y el javascript:

$(document).ready(function(){ 
    $(".solTitle a").live('click',function(e){ 
     var contentId = "summary_" + $(this).attr('id'); 
     $(".summary").hide(); 
     $("#" + contentId).show(); 
    }); 
}); 

Vea el ejemplo: http://jsfiddle.net/kmendes/4G9UF/

Answer 6

permite echar una etiqueta de ancla con un evento onclick, que llama a una función de JavaScript.

<a href="#" onClick="showDiv(1);">1</a> 

Ahora en Javascript a escribir el código de abajo

function showDiv(pageid) 
{ 
    alert(pageid); 
} 

Esto le mostrará una alerta de "1" ....