대화 상자에서 체크 박스를 확인할 수 없음

Question

Can't select or deselect checkboxes inside jQuery UI Modal Dialog과 비슷한 j- 인덱스 UI 대화 상자에서 Z- 색인 문제를 해결하려고 시도하고 있습니다. bug report이 있다는 것을 알고 있습니다.

그래서 권장하는 Z- 인덱스 위로하려고, 나는 다음과 같은 코드를 추가 :

$('#interface').click(function(evform){ 
    $('#interface').prop('z-index')=99999; 
}); 

를 어디에 크롬 및 파이어 폭스 CONSOLE.LOG 상태 그러나

Uncaught ReferenceError: Invalid left-hand side in assignment

의에도 불구하고 오류가 발생하면 확인란이 이제 작동합니다 (매번 콘솔 오류가 발생 함). 문제의 라인을 제거하면, 체크 박스는 "unclickable"이됩니다. 이 코드를 올바르게 코딩하려면 어떻게해야합니까?

내 HTML :

<div id="dialog" title="Loading..."> 
    <p id="interface">Loading...</p> 
</div> 

가 (그런데, 나는 <p>에 인라인 스타일을 추가하는 시도, 그것은 작동하지 않았다 :

<p id="interface" style="z-index:99999">Loading...</p> 

을 그리고 AJAX와 함께, 내가 내용을 교체 유효한 체크 박스 html로 '#interface'를 입력하십시오 :

<label for="right"> 
    <input name="right" type="checkbox"> 
</label> 

그리고 저는 일반 jQuery/Dialog UI 파일 포함.

if ($(evform.target).prop('type')=="checkbox"){ 
     $(evform.target).checked; 
} 

* 편집 UPDATE * 2013 년 12 월 (22)로

:이 작업을 수동으로 체크 박스를 전환하지 이후

마지막으로 참고, 나는, 창조적 시도 (EDGE pre release) jQuery core의 버그가 수정되었습니다. 나는 그들이 안정 버전을 곧 풀어주기를 바란다 (나는 그것이 v1.10이 될 것이라고 믿는다)! http://jsfiddle.net/tj_vantoll/XXGQA/

http://bugs.jqueryui.com/ticket/6267

Answer 1

z-index을 #dialog (#interface이 아니라)으로 설정해야합니다.

함수 호출에 값을 지정하려고하므로 코드에서 오류가 발생합니다. 그래서 코드가 있어야한다 : 단지

$('#interface').click(function(evform){ 
  $('#dialog').css('z-index', 99999); 
}); 

또는이 당신의 CSS에 :

#dialog { z-index: 99999; } 

UPDATE

이 솔루션하지 방탄. jQueryUI에 제출 된 버그 보고서에 따르면 확인란 아래에 대화 상자 아래의 오버레이보다 낮은 z-index가 있으면 문제가 발생한다고합니다.jQueryUI는 z- 인덱스를 절대적인 방식으로 비교하는 것으로 보이는데 이는 CSS 표준에 위배됩니다 (하지만 적절한 비교는 리소스 집약적 인 것으로 생각하면 이해할 만합니다).

그래서 실제 해결책은 대화 상자 내에 z-index (및 position)을 설정하는 요소에 따라 달라질 수 있습니다. 이 버그를 피하려면 대화 상자에 z-index을 사용하거나 오버레이에 할당되는 것보다 더 높은 값 (즉, 99999 제안)보다 높은 값을 설정하지 마십시오.

Answer 2

$('#interface').click(function(evform){ 
    $('#interface').prop('z-index')=99999; 
}); 

가

$('#interface').click(function(evform){ 
    $('#interface').prop('z-index', 99999); 
}); 

(있는 경우) 제 2 인수되어야 값의 속성을 설정하면에 jfiddle에서 테스트 할 수있다.

Answer 3

문제는 내가 내 클릭 코딩에 있던 return false;로 밝혀 : 진단

$('#interface').click(function(evform){ 
    *** did stuff here *** 

    evform.preventDefault; 
    return false; //This is the offending line of code 
}); 

, 나는 페이지에 높은 Z- 인덱스를 가지고 무엇을보고 싶어, 그래서 추가 :

$('*').each(function(){ 
    if ($(this).css('z-index')>99) { 
     console.log ($(this).css('z-index')+", " + $(this).prop('class')); 
    } 
}); 

z 지수가 99보다 높은 모든 요소를 ​​제공합니다. ui 대화 상자는 일반적으로 1001 또는 1002로 설정되었으므로 @bfavaretto에 나열된 '99999'는 충분히 높았습니다.

아직도 return false;에서 오류가 생성 된 이유를 아직 알지 못하지만 다음 업데이트로 문제가 해결되기를 바랍니다.