JQuery 클릭 이벤트 여러 번 실행 중임

Question

여러 번의 클릭 이벤트가 이미 발생했음을 알고 있습니다. 모두 읽었지만 여전히 잘못 될 수는 없습니다.

완전히 내가 다른 사람이 쉽게 선택할 수 있습니다 분명 뭔가가있어 희망을 ...

일부 배경

내 코드는 엔터프라이즈 소셜 네트워킹 플랫폼 내에서 작동하고 (내용 분석을 위해 BI 대시 보드를 생성

약 1000 줄의 내용, 대부분 특정 도메인이므로 전체를 게시하기에는 너무 많습니다).

나를 슬프게하는 부분은 대시 보드 시각화 자체를 구축하는 기능입니다.

다음

간다 ...

function makePage(){ 
$("#policyCount").text(policyCount); 
    var docTypes=getGlobalDocTypes(polOwners); //returns a constrained vocab array 
    var statusTypes=getGlobalStatusTypes(polOwners); //returns a constrained vocab array 
    $.each(polOwners,function(){ // polOwners is a global array that contains the BI data to be visualised 
    html="" 
    var ownerName = this.name.split(":")[1]; // name is a str in format "Owner:HR" 
    html += "<div id='" + ownerName + "' class='ownerData'>"; 
    html += "<div class='ownerHeading'>" + ownerName + "</div>"; 
    html += this.policies.length + " Policy documents maintained<br />"; // policies is an array of docs managed by owner 

    divIDReview = "dboard_" + ownerName + "reviewchart"; 
    html += "<div id='" + divIDReview + "' class='dboardelement'></div>"; 

    divIDType = "dboard_" + ownerName + "typechart"; 
    html += "<div id='" + divIDType + "' class='dboardelement'></div>"; 

    divIDStatus = "dboard_" + ownerName + "statuschart"; 
    html += "<div id='" + divIDStatus + "' class='dboardelement'></div>"; 

    html += "<div id='" + ownerName + "ToggleTable' class='toggletable' owner='" + ownerName + "'>"; 
    html += "Click to display all " + ownerName + " documents<br /></div>"; 
    html += "<div id='" + ownerName + "polTable' class='poltable'>"; 
    html += getPolTable(this.policies); // Returns an HTML table of doc metadata 
    html += "</div>"; 

    html += "</div>"; 
  $("#owners").append(html); // When this function is called #owners is an empty div 

    $(".toggletable").mouseover(function(){ 
    $(this).css({'cursor':'pointer','text-decoration':'underline'}); 
    }); 

    $(".toggletable").mouseout(function(){ 
    $(this).css({'cursor':'default','text-decoration':'none'}); 
    }); 


    $(".toggletable").each(function(i, elem){ 
    $(elem).click(function(){ 
     if ($(this).next(".poltable").css("display")=="none"){ 
     // Currently hidden - so show 
     if (debug){console.log($(this).attr("id") + " was clicked")} 
     $(this).html("Click to hide " + $(this).attr('owner') + " documents<br/>"); 
     $(this).next(".poltable").css("display","block"); 
     } else { 
     if (debug){console.log($(this).attr("id") + " was clicked")} 
     $(this).html("Click to display all " + $(this).attr('owner') + " documents<br />"); 
     $(this).next(".poltable").css("display","none"); 
     }  
    }); 
    }); 

    // the next section calls functions that use the Google vis api to draw pie charts 

    drawPie(300,200, "Review Status", "Status", "Policies", getReviewStatus(this.policies), ["green","orange","red"], divIDReview); 

    drawPie(300,200, "Document Types", "Type", "Docs", getDocTypes(this.policies, docTypes), [], divIDType); 


    drawPie(300,200, "Document Status", "Status", "Docs", getStatusTypes(this.policies, statusTypes), [], divIDStatus); 
}); 
} 

는 희망 그 문제를 설명하기에 충분합니다.

이 코드는 3 개의 원형 차트와 기본 데이터 테이블을 숨기거나 표시하는 옵션으로 구성된 각 polOwner에 대시 보드 디스플레이를 만듭니다.

클릭 이벤트를 .toggletable 클래스에 적용하여 시작했습니다. 여러 번 해고했을 때 나는 여기에 다른 대답에 설명 된 방법을 .each과 함께 사용하여 클래스의 각 인스턴스에 고유 한 이벤트를 첨부했습니다.

그래서 어떻게됩니까?

현재이 있으며 언뜻보기에 click 이벤트는 다른 모든 테이블의 표시 상태 만 토글하는 것으로 보입니다. 그러나 콘솔 로그는 첫 번째 인스턴스의 경우 9 번, 두 번째 인스턴스의 경우 8 번, 세 번째 인스턴스의 경우 7 번 등의 이유로 홀수가 테이블을 대체 상태로 유지하므로 콘솔 로그에 표시됩니다 (이 때 디스플레이가 a .toggle 애니메이션).

나는 텍스트 편집기 사용자이지만 MS Expression Web 4는 HTML을 검사하는 데 유용한 도구입니다. 전체 생성 된 마크 업 (거의 4000 줄)의 사본을 붙여 넣었으며 잘못된 중첩 또는 구조 오류를 볼 수 없습니다.

아이디어가 있으십니까?

Answer 1

당신은 몇 가지 중첩 루프를 가지고 각 polOwner를 들어

// jQuery each on polOwners 
$.each(polOwners,function(){ 
    // ... code that appends .toggletable class 

    // jQuery each on .toggletable class 
    $(".toggletable").each(function(i, elem){ 
     // code that runs on the toggletable element 
    }); 
}); 

당신이 toggletable 클래스 사업부를 추가. 그 다음 내부에서 toggletable 클래스로 각 div를 반복하고 클릭 이벤트를 추가합니다.

첫 번째 polOwner는 1 클릭, 두 번째 polowner는 2 클릭, 세 번째 polowner는 3 클릭 등이 추가됩니다.

는 toggletable에게 각 polOwner의 각 외부 이동

당신은