패딩이 jQuery 선택기를 중단합니까?

오늘 아침 2 시간 동안 jQuery 기능이 페이지의 한 부분에서 작동하지만 다른 부분에서는 작동하지 않는지 확인하려고했습니다.패딩이 jQuery 선택기를 중단합니까?

마지막으로 컨테이너의 수직 채우기로 좁혔습니다.

내 CSS에서이 있던 경우 :

div.collapsiblePanel { 
padding: 0px 1%; 
}

, jQuery를 통해, 나는 부모 (.collapsiblePanel)의 요소를 찾을 수 있고, 자식 요소를 그 DIV로 통과하고 조작 할 수 있습니다. 그러나, 나는이 내 스타일 시트에 그냥이 한 가지를 변경하는 경우 :

div.collapsiblePanel { 
padding: 5px 1%; 
}

그런 다음 jQuery를 는 부모 (.collapsiblePanel를) 찾을 수 있지만 아이들을 통과 할 수 없습니다.

크레이지, 맞습니까? 무슨 일이 벌어지고 있는지에 관한 이론? 나는 이걸 생각하면서 내 jQuery와 뭔가 관계가 있다고 생각했지만 궁극적으로 CSS 문제였다. 마크 업/CSS/코드의

의 요청에 따라

, 좀 더 조각 :

(겉으로는) 작동하지 않는 특정 jQuery를 기능 :

function finishUp(ajaxContainer,originalContainer,loadingAlert) { 
    $(ajaxContainer).find("input.btnSave").css("border","3px solid red"); 
    var saveButtonn = $(ajaxContainer).find("input.btnSave"); 
    console.log(ajaxContainer); 
    console.log(originalContainer); 
    console.log(loadingAlert); 
    console.log(saveButton); 
    $(ajaxContainer).find("input.btnSave").css("border","3px solid red").click(function(){ 
     alert("you clicked the save button"); 
     savePanel($(this)); 
    }); 

};

무슨 일이야 것은, 이전의 기능 부하 후 AJAX를 통해 내용을 가져온 다음 컨테이너를 표시하면이 함수가 들어 와서 버튼에 클릭 이벤트를 첨부합니다.

당신이 볼 수 있듯이 거기에 여분의 로깅 코드가 있습니다. CSS 수직 패딩이 '0'으로 설정되면, 방화범 입력은 각각의 적절한 객체 이름을 기록합니다. CSS 수직 패딩을 다른 것으로 변경하면 마지막 객체 (saveButton)가 Firebug에서 빈/빈으로 다시 나타납니다.

html로 : 그 DIV가 이전의 jQuery 기능에 의해 생성 및 콘텐츠로드되고 있음을

<div class="ajaxEditPanel editablePanel collapsiblePanel" style="display: block;">  
    <form> 
     <fieldset class="sideLabels dividers"> 
     <legend>Edit Realtionship Information</legend> 

       ...the form... 
       <div class="formItem formButtons" 
        <input value="save" class="button btnSave" type="button"> 
        <input value="cancel" class="button btnCancel" type="button"> 
       </div>      
     </fieldset>   
    </form> 
</div>

참고. 처음에는 타이밍 문제라고 생각했지만 DOM에 아직로드되지 않은 객체에 이벤트를 첨부하려고했습니다. 그러나 이것이 왜 페이지에서 다른 곳에서 똑같은 기능이 작동하는지 설명하지 못했습니다. 이 작업을하거나하지 않을 수있는 변수 하나가 CSS 패딩 비트가되었습니다. 현재 함수가 작동하는 페이지의 부분에서 컨테이너에 수직 패딩을 추가하면 jQuery가 자식 요소를 선택하지 못하게됩니다.

출처

2009-10-29 DA.

이러한 경우 모두를 보여주는 데모를 올려 경우에, 나는 누군가가 잘못하고있는 것을 당신에게 말할 것이다 보장 , 또는 오른쪽. – mkoryak

그럴 것 같지 않습니다 ... 어떻게 아이들을 횡단하고 있습니까? –

문제가되는 HTML 단편도 게시 할 수 있다면 도움이 될 수 있습니다. –

나는 이전과 비슷한 것을 발견했다. JS가 요소에 바인딩하라는 메시지를받은 후 DOM이 slighlty로 렌더링되는 타이밍 문제 일 수있다. 귀하의 경우에는 패딩은 그 사람 div을 렌더링하는 데 몇 밀리 초가 걸릴 수 있으며, 따라서 바인딩 할 항목이 있기 전에 바인딩이 실행되도록 할 수 있습니다. 필자는 Firebug가 프레임에서 소스를 렌더링하기 위해 포인트에서 점프하기 때문에 렌더링 프로세스의 속도를 느리게 할 수 있음을 알고 있습니다.

이것이 맞지 않다는 것을 확인하려면 바인딩 코드 주위에 setTimeout(function(){ ... }, 500)을 추가하고 (또한 firebug를 끈 경우) 그 후에 바인딩되는지 확인하십시오. 그럴 경우 문제가 있습니다.

또 다른 방법은 이벤트를 트리거 할 수있는 링크로 입력을 변경하고 이벤트 위임을 사용할 수 있습니다 : jQuery('.btnSave').live('click', function(){savePanel($('selector>for>panel')); })

출처

2009-10-31 01:23:15

패딩이 jQuery 선택기를 중단합니까?

답변

관련 문제