asp.net 초기화 jQuery 클릭 이벤트 핸들러가 체크 상자에 대해 두 번 호출됩니다.




jquery 이벤트 초기화 (8)

당신이보고있는 것은 사건 버블 링입니다. 클릭 이벤트는 먼저 레이블에 의해 처리 된 다음 확인란에 전달됩니다. 각각에 대해 하나의 경고를받습니다. 이벤트 버블 링을 방지하려면 클릭 핸들러에서 false를 반환해야합니다.

$(document).ready(function() {
        $('.test').click(function() {
                alert("Click");
                return false;
        })
});

그러나 이벤트 버블 링을 방지하는 동안 체크 박스가 상태를 변경하지 못하게하는 바람직하지 않은 부작용이 있습니다. 따라서 코드를 작성해야합니다.

ASPX 페이지에서 다음 코드에 문제가 있습니다.

<script type="text/javascript">
$(document).ready(function() {
    $('.test').click(function() {
        alert("click")
    })
});
</script>

<asp:CheckBox runat="server" Text="Checkbox XYZ" CssClass="test" ID="cb1" />

브라우저 (FF3.5 / IE8)에서 다음과 같은 문제점이 있습니다.

  • 확인란 (작은 사각형)을 클릭하면 예상대로 작동합니다.
  • 체크 박스의 텍스트 ( "체크 박스 XYZ")를 클릭하면 클릭 이벤트가 두 번 발생하고 경고가 두 번 표시됩니다.

나는 이것이 체크 박스가 HTML로 렌더링되는 방식과 관련이 있다고 생각한다.

<span class="test">
 <input id="ctl00_c1_cb1" type="checkbox" name="ctl00$c1$cb1" checked="checked"/>
 <label for="ctl00_c1_cb1">Checkbox XYZ</label>
</span>

클릭 이벤트 처리기가 두 번 호출되지 않도록 올바르게 설정하려면 어떻게해야합니까?


그럼 다시 내 질문을 읽은 후 해결 방법을 찾았습니다.

jQuery 선택기에 "input"을 추가하기 만하면됩니다.

<script type="text/javascript">
$(document).ready(function() {
        $('.test input').click(function() {
                alert("click")
        })
});
</script>

나는 방금 같은 일을 경험했지만 이벤트 버블 링이 내 문제를 일으키는 지 확신하지 못합니다. 사용자 정의 트리 컨트롤이 있고 항목을 열면 $(id).click() 을 사용하여 특정 종류의 모든 요소에 핸들러를 연결합니다.

나는 이미 이벤트가있는 다른 곳의 기존 아이템이 다시 추가 될 수 있음을 의미한다고 생각합니다. 그 모든 바인딩을 다시 바인딩 내 문제를 해결, 따라서 발견 :

$('img.load_expand').unbind("click").click(function()
{
  // handler
});

나는 그 질문이 지금까지는 끝났음을 안다.하지만 나는 똑같은 문제에 봉착했다. 그리고 내가 발견 한 해결책을 추가하고 싶다. 미래에 비슷한 문제가 생길 수도있다.

다음과 같은 ASP 코드를 추가하면 :

<asp:CheckBox runat="server" Text="Checkbox XYZ" CssClass="test" ID="cb1" />

문제는 <asp:CheckBox ...> 가 html 컨트롤이 아니라 ASP 발명 한 일부 정신병자의 꼬인 마음에서 만든 것일 뿐이므로 브라우저가 다른 것을 받게된다는 것입니다.

브라우저에서 다음과 같은 메시지가 표시됩니다.

<span class="test">
    <input id="garbageforYourId_cb1" type="checkbox" name="garbage$moregarbage$cb1"/>
    <label for="evenMoreGarbage_cb1">Checkbox XYZ</label>
</span>

가능한 많은 솔루션 중 하나 :

브라우저는 입력란에 "체크 상자"라는 내용을 포함하는 스팬을 수신하고 텍스트에 해당 레이블을 표시합니다. 따라서 이것에 대한 나의 해결책은 다음과 같다 :

$('.test > :checkbox').click(function() {
    if ($(this).attr("checked")) {
        alert("checked!!!");
    } else {
        alert("non checked!!!");
    }
});

무슨 일이 있었던거야? 이 선택자 $('.test > :checkbox') 는 "test"클래스를 가진 요소를 찾고 그 속에 들어있는 체크 박스를 가져온다는 것을 의미합니다.


해결 : Firefox 3.6.12 및 IE8에서 작동합니다.

$(function(){
        $("form input:checkbox").unbind("click")
        .click(function(){
            val = $(this).val();
            alert(val);
        })
    }

트릭은 unbind("click"). .click(fn) 바인드하기 전에; 이렇게하면 동일한 이벤트가 두 번 실행되지 않습니다.

"변경"이벤트는 처음 체크 상자가 선택되었을 때 속임수가되지 않습니다. 그래서 대신 "클릭"을 사용합니다.


이 함수는 두 번 실행됩니다. 한 번 안쪽에서 다음 내부 자체에서 다시 불러옵니다. 간단한는 끝에 return 문을 추가하십시오.

<script type="text/javascript">
$(document).ready(function() {
    $('.test').click(function() {
        alert("click");
        return false;
    })
});
</script>

<asp:CheckBox runat="server" Text="Checkbox XYZ" CssClass="test" ID="cb1" />

이것은 나를 위해 완벽하게 작동했습니다.


$(document).ready(function() {
    $('.test').click(function(event) {
                    event.stopImmediatePropagation();
                    alert("Click");
                    })
                 }
              );

이벤트 전달을 중지하여 코드를 작동시킬 수있었습니다. 체크 박스의 상태 변경에는 영향을 미치지 않았습니다.


.click 대신 .mouseup을 사용하십시오.





checkbox