클릭()에서 jQuery 클릭을 사용하여 앵커를 처리합니다.

클릭()에서 jQuery 클릭을 사용하여 앵커를 처리합니다.

다음과 같이 for 루프에 동적으로 생성된 앵커 태그 세트가 있습니다.

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

이 코드가 실행되면 이 경우 중 하나에 대한 html 출력은 다음과 같습니다.

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

이제 위 링크를 클릭할 때 다양한 텍스트가 표시되기를 원합니다.openSolution()은 다음과 같습니다.

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

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

    });
}

실행하고 링크 중 하나를 클릭하면 jquery click 핸들러 내부에 흐름이 들어오지 않습니다.위에서 사용한 경고를 통해 확인했습니다.여기' 경보만 표시하고 여기' 경보는 표시하지 않습니다.링크를 두 번째 클릭하면 divId의 값이 정확하게 적용되어 모든 것이 완벽하게 작동합니다.

링크를 처음 클릭하면openSolution함수가 실행됩니다.그 기능은 다음을 묶습니다.click링크에 이벤트 핸들러가 연결되어 있지만 실행되지 않습니다.링크를 두 번째로 클릭하면click이벤트 핸들러가 실행됩니다.

당신이 하고 있는 일은 애초에 jQuery를 사용하던 시점을 무산시키는 것 같습니다.클릭 이벤트를 처음부터 요소에 바인딩하지 않는 이유는 무엇입니까?

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

이런 식으로 당신은 필요가 없습니다.onClick당신의 요소에 대한 속성.

또한 동일한 요소를 가진 여러 개의 요소가 있는 것처럼 보입니다.id값("solTitle")이(가) 잘못되었습니다.다른 공통적인 특징을 찾아야 할 것입니다.class일반적으로 좋은 옵션입니다.)모든 경우를 변경하는 경우id="solTitle"로.class="solTitle", 그런 다음 클래스 선택기를 사용할 수 있습니다.

$(".solTitle a")

중복된 이후id값이 잘못되었습니다. 코드가 동일한 복사본을 여러 개 직면할 경우 예상대로 작동하지 않습니다.id. 발생하는 경향이 있는 것은 그것과 함께 요소가 처음으로 발생한다는 것입니다.id가 사용되고 나머지는 모두 무시됩니다.

자바스크립트 함수를 호출하는 온클릭 이벤트가 있는 앵커 태그를 찍겠습니다.

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

이제 자바스크립트로 아래 코드를 작성하세요.

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

그러면 "1"의 경고가 표시됩니다.

HTML은 다음과 같이 표시되어야 합니다.

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

그리고 자바스크립트:

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

예제 참조: http://jsfiddle.net/kmendes/4G9UF/

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

    });
 });

몇 가지를 바꿨습니다.

1. onclick 특성을 제거하고 문서 내부의 bind click 이벤트를 제거합니다.ready
2. sol변경sOLTitle을 ID를 CLASS로 변경: ID를 반복할 수 없습니다.

요소에 대해 같은 ID를 여러 번 가질 수 없습니다.그것은 독특함을 의미합니다.

클래스를 사용하고 ID를 고유하게 만듭니다.

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

그리고 클래스 선택기를 사용합니다.

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

});

할당하는 중입니다.onclick함수 내부의 사건즉, 함수가 한 번 실행되면 두 번째는onclick이벤트는 요소에도 할당됩니다.

함수를 할당합니다.onclick또는 jquery를 사용합니다.click().

둘 다 가질 필요는 없습니다.

언급URL : https://stackoverflow.com/questions/8908191/use-jquery-click-to-handle-anchor-onclick