użyć jQuery kliknij, aby obsłużyć kotwicy onClick()

Question

Mam zestaw generowanych dynamicznie tagów kotwicy w pętli for w następujący sposób:

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

Gdy ten kod jest wykonywany wyjście HTML dla jednego przypadku będzie wyglądać na przykład:

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

Teraz chcę, aby inne teksty były wyświetlane po kliknięciu powyższych linków. OpenSolution() wygląda następująco:

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

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

    }); 
} 

Kiedy wykonać go i kliknij na jeden z linków, przepływ doesnot się wewnątrz przewodnika jquery click. Sprawdziłem to za pomocą powyższych alertów. Wyświetla tylko alert - "tutaj", a nie alert - "tutaj". Po kliknięciu linku po raz drugi wszystko działa idealnie z poprawną wartością divId.

Answer 1

Przy pierwszym kliknięciu łącza, funkcja openSolution jest wykonywany. Ta funkcja wiąże program obsługi zdarzeń click z linkiem, ale nie będzie go wykonywał. Za drugim kliknięciem łącza zostanie wykonana procedura obsługi zdarzeń click.

To, co robisz, zdaje się niweczyć punkt używania jQuery w pierwszej kolejności. Dlaczego nie po prostu powiązać zdarzenie click do elementów w pierwszej kolejności:

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

ten sposób nie trzeba onClick atrybuty swoich elementów.

Wygląda również na to, że masz wiele elementów o tej samej wartości id ("solTitle"), która jest nieprawidłowa. Będziesz musiał znaleźć inną wspólną cechę (class jest zazwyczaj dobrym rozwiązaniem). Jeśli zmienić wszystkie wystąpienia id="solTitle" do class="solTitle" można następnie użyć selektora Klasa:

$(".solTitle a") 

Od zduplikowane id wartości jest nieważny, kod nie będzie działać zgodnie z oczekiwaniami w obliczu wielu kopii tego samego id. Często zdarza się, że pierwsze wystąpienie elementu z tym id jest używane, a wszystkie pozostałe są ignorowane.

Answer 2

Nie można wielokrotnie mieć tego samego identyfikatora dla elementów. Ma być unikalny.

Użyj klasę i uczynić swoje unikalne identyfikatory:

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

i użyj wybieraka Klasa:

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

Jesteś przypisywania onclick zdarzenia wewnątrz funkcji. Oznacza to, że po wykonaniu funkcji jeden raz, drugie zdarzenie onclick jest również przypisane do tego elementu.

Albo przypisz funkcję onclick lub użyj jquery click().

Nie trzeba mieć zarówno

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

    }); 
}); 

zmieniłem kilka rzeczy:

1. usuwają attr onclick i powiązać zdarzenie click wewnątrz document.ready
2. zmienił solTitle być do klasy ID: Identyfikator cant być powtarzane

Answer 5

HTML powinien wyglądać następująco:

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

A javascript:

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

Patrz Przykład: http://jsfiddle.net/kmendes/4G9UF/

Answer 6

Weźmy znacznik zakotwiczenia ze zdarzeniem onclick, który wywołuje funkcję javascript.

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

Teraz w javascript napisać poniższy kod

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

To pokaże alert "1" ....