Tengo generado dinámicamente las etiquetas de anclaje en un bucle for 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 en el html de salida para uno de los casos de aspecto:

<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 diferentes textos que se muestra al hacer clic en los enlaces anteriores.
openSolution() se parece a esto:

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 yo ejecute y haga clic en cualquiera de los enlaces, el flujo no vienen dentro del jquery haga clic en controlador. Lo he comprobado en el anterior alertas de usa. Sólo se muestra el estado de alerta ‘aquí’ y no el de alerta ‘aquí.
Al hacer clic en el enlace del segundo tiempo, todo funciona a la perfección con el valor correcto de divId.

InformationsquelleAutor crazy_coder | 2012-01-18

6 Comentarios

  1. 93

    La primera vez que haga clic en el enlace, el openSolution se ejecuta la función. La función que se une a la click controlador de eventos para el enlace, pero no ejecutarlo. La segunda vez que haga clic en el enlace, el click controlador de eventos será ejecutado.

    Lo que están haciendo parece a una especie de derrotar al punto de utilizar jQuery en el primer lugar. ¿Por qué no enlazar el evento click de los elementos en el primer lugar:

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

    De esta manera usted no necesita onClick los atributos de los elementos.

    También parece que tiene varios elementos con la misma id valor («solTitle»), que no es válido. Usted tendría que encontrar alguna otra característica común (class es generalmente una buena opción). Si cambia todas las apariciones de id="solTitle" a class="solTitle", a continuación, puede utilizar un selector de clase:

    $(".solTitle a")

    Desde duplicado id valores no es válido, el código no funcionará como se espera cuando se enfrenta a múltiples copias de la misma id. Lo que suele suceder es que la primera aparición del elemento con el que id se utiliza, y todos los demás son ignorados.

    • que no será válida desde el #soltitle se repite
    • He mencionado que en el último párrafo. Supongo que podría ser un poco más claro, aunque, gracias.
    • Esta respuesta es obsoleto hoy en día. jQuery utiliza hoy en día .on('click', function() { en lugar de .click(function() {
  2. 8

    Permite llevar una etiqueta de anclaje con un evento onclick, que llama a una función Javascript.

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

    Ahora en javascript escribir el código de abajo,

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

    Esto le mostrará una alerta de «1»….

    • En realidad no responder a la pregunta. La pregunta era cómo utilizar jQuery para controlar el clic. Su respuesta sólo funciona con javascript y no jQuery.
    • Sí, pero es que me hizo pensar. Esto fue más fácil en mi caso.
  3. 5

    El HTML debe verse como:

    <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();
        });
    });

    Ver el Ejemplo: http://jsfiddle.net/kmendes/4G9UF/

    • Tenga en cuenta que live() está en desuso en jQuery 1.7 y se retira en 1.9. El método recomendado para conectar los detectores de eventos es on(). ref: api.jquery.com/live
  4. 3
    <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'); */
    
        });
     });

    He cambiado algunas cosas:

    1. quitar el onclick attr y se unen evento de clic dentro del documento.listo
    2. cambiado solTitle a ser un IDENTIFICADOR de una CLASE: identificador no puede ser repetido
  5. 2

    Usted no puede tener múltiples vez que el mismo ID de los elementos. Está destinado a ser único.

    El uso de una clase y hacer que su Id único:

    <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 = ''; 
    
    });
    • gracias a todos. Se trabajó con tus sugerencias. 🙂
  6. 1

    Usted está asignando una onclick evento dentro de una función.
    Eso significa que una vez que la función se ha ejecutado una vez, la segunda onclick evento se asigna al elemento así.

    Asignar la función onclick o el uso de jquery click().

    No hay necesidad de tener ambos

Dejar respuesta

Please enter your comment!
Please enter your name here