접을 수있는 헤더 안에있는 jQuery 모바일 버튼

Question

누군가가 나를 도울 수 있다면 정말 고마워. JQuery 모바일 1.2 베타 (jQuery 1.7.1 사용)를 사용하여 접을 수있는 블록을 동적으로 빌드하려고합니다.

이제 접을 수있는 머리글 안에 버튼이 있고 모든 것이 제대로 작동하지만 버튼을 클릭하면 내가 설정 한 클릭 이벤트가 실행되지 않고 대신 블록이 축소되거나 축소됩니다.

$('#main').append('<div data-role="collapsible" data-theme="c" data-content-theme="c" id="pflicht_' 
+ identifier + '" pflichtID="' + val.guid + '">' + 
'<h3 style="white-space: normal;" id="inner_header_' + identifier + '">' 
+ header + ': ' + val.pflichtBezeichnung + ' (' + val.Intervall + ' - ' + val.IntModus + ') ' 
+ val.pflichtNummer + '.' + val.pflichtZusatz + 
'<button type="button" data-inline="true" id="ok" pflichtID="' 
+ val.guid + '" identifier="' + identifier + '" >Ok</button></h3>' + 
'</div>' 

$("#ok").live('click', function() { 
        alert("ok"); 
       }); 

버튼의 클릭 이벤트를 얻으려면 어떻게해야합니까?

도움 주셔서 감사합니다.

Answer 1

먼저 .live은 (는) on으로 대체되었습니다.

여기에서 무슨 일이 벌어지고 있는지 이해하려면 이벤트 위임이 일반적으로 작동하는 방식을 이해해야하고 특히 이벤트 위임을 사용할 때 DOM (상위 요소)의 상위 수준에 이벤트를 바인딩 한 다음 이벤트가 위로 올라 오므로 원래 이벤트를 검사하여 지정된 선택기와 일치하는지 확인하십시오.

.live 방법 (그래서 항상 부모 요소에 결합 된), 그리고 이벤트가 그것이 특정 셀렉터와 일치하는지 확인하는 document까지 거품 때 document에 이벤트를 결합하여 작동한다. 귀하의 경우 문제는 무엇입니까 (아마도 collapisple 헤더)는 click 이벤트를 삼켜 서 문서에 도달하지 못하게합니다.

솔루션은 매우 간단합니다. 버튼에 직접 바인딩하거나 이벤트가 도달하는 DOM의 하위 수준에 위임 할 수 있습니다. 예를

$('#inner_header_' + identifier).on('click', '#ok', function(e) { 
    alert('ok'); 
}); 

를 들어

당신은 당신이 당신이 stopPropagation() 방법

을 사용하여이 작업을 수행 할 수있는, 더 품어에서 이벤트를 중지 버튼을 클릭하면 확장 및 축소 할 헤더를하지 않으려면 예를 들어

$('#inner_header_' + identifier).on('click', '#ok', function(e) { 
    alert('ok'); 
    e.stopPropagation() 
});