jquery 클릭을 사용하여 앵커 onClick () 처리

jquery 클릭을 사용하여 앵커 onClick () 처리

---

다음과 같이 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 클릭 처리기 내부에 오지 않습니다. 사용 된 위의 경고로 확인했습니다. 경고는 '여기'만 표시하고 '여기'는 표시하지 않습니다. 링크를 두 번 클릭하면 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값은 유효하지 않으므로 동일한 .NET의 여러 복사본을 마주 할 때 코드가 예상대로 작동하지 않습니다 id. 발생하는 경향은 해당 요소의 첫 번째 발생 id이 사용되고 나머지는 모두 무시 된다는 것 입니다.

---

자바 스크립트 함수를 호출하는 onclick 이벤트가있는 앵커 태그를 가져옵니다.

<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 속성을 제거하고 문서 내에서 클릭 이벤트를 바인딩하십시오.
2. solTitle을 CLASS의 ID로 변경 : 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 = ''; 

});

---

You are assigning an onclick event inside an function. That means once the function has executed once, the second onclick event is assigned to the element as well.

Either assign the function onclick or use jquery click().

There's no need to have both

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