utilizzare jQuery clic per gestire ancoraggio onClick()

Question

Ho una serie di tag di ancoraggio generati dinamicamente in un ciclo for come segue:

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

Una volta che questo codice viene eseguito l'output HTML per uno dei casi apparirebbe Mi piace:

<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> 

Ora voglio che vengano visualizzati diversi testi facendo clic sui collegamenti sopra. openSolution() appare così:

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

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

    }); 
} 

Quando eseguire e fare clic su uno dei link, il flusso doesnot venire all'interno del gestore jquery click. L'ho controllato con gli avvisi sopra riportati. Visualizza solo l'avviso - "qui" e non l'avviso - "qui dentro". Cliccando due volte sul collegamento, tutto funziona perfettamente con il valore corretto di divId.

Answer 1

La prima volta che si fa clic sul collegamento, viene eseguita la funzione openSolution. Questa funzione associa il gestore di eventi click al collegamento, ma non lo eseguirà. La seconda volta che si fa clic sul collegamento, verrà eseguito il gestore di eventi click.

Quello che stai facendo sembra in qualche modo sconfiggere il punto di utilizzo di jQuery in primo luogo. Perché non associare l'evento click agli elementi in primo luogo:

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

In questo modo non è necessario onClick attributi sui vostri elementi.

Sembra anche che tu abbia più elementi con lo stesso valore id ("solTitle"), che non è valido. Dovresti trovare qualche altra caratteristica comune (class di solito è una buona opzione). Se si cambia tutte le occorrenze di id="solTitle"-class="solTitle", è possibile quindi utilizzare un selettore di classe:

$(".solTitle a") 

Dal duplicati id valori non è valido, il codice non funziona come previsto quando di fronte a più copie dello stesso id. Ciò che tende ad accadere è che viene utilizzata la prima occorrenza dell'elemento con quello id e tutti gli altri vengono ignorati.

Answer 2

Non è possibile avere più volte lo stesso ID per gli elementi. È pensato per essere unico.

utilizzare una classe e rendere il vostro ID unico:

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

e utilizzare il selettore di classe:

$('.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

si sta assegnando un evento onclick all'interno di una funzione. Ciò significa che una volta che la funzione è stata eseguita una volta, anche il secondo evento onclick viene assegnato all'elemento.

O assegnare la funzione onclick o uso jquery click().

Non c'è bisogno di avere sia

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'); */ 

    }); 
}); 

ho cambiato alcune cose:

1. rimuovere l'attr onclick e l'evento si legano click all'interno del document.ready
2. cambiato solTitle essere un ID ad una classe: id cant essere ripetuto

Answer 5

Il codice HTML dovrebbe essere simile:

<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> 

E il javascript:

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

vedere l'esempio: http://jsfiddle.net/kmendes/4G9UF/

Answer 6

consente di dare un tag di ancoraggio con un evento onclick, che chiama una funzione Javascript.

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

Ora in javascript scrivere il codice qui sotto

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

Questo vi mostrerà un avviso di "1" ....