填充中断jQuery选择器？

我花了2个小时，今天上午试图找出为什么我的jQuery函数在页面的一部分工作，但不是另一部分。填充中断jQuery选择器？

我终于把它缩小到容器上的垂直填充。

如果我有这个在我的CSS：

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

然后，通过jQuery，我能找到的父（.collapsiblePanel）元素，可以穿越到该分区和操纵子元素。但是，如果我在样式表改变只是这样一件事到此：

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'时，Firebug会记录每个对象的正确名称。当我将CSS垂直填充更改为其他任何内容时，最后一个对象（saveButton）在Firebug中返回为空/空白。

的HTML：

<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>

注意正由以前的jQuery函数创建的DIV和加载内容。起初，我认为这是一个计时问题，我试图将一个事件附加到尚未加载到DOM中的对象。然而，这并没有解释为什么在页面的其他地方使用相同的确切功能。我可以改变的那个变量会使这个工作或不工作最终成为那个CSS填充位。如果在功能当前工作的那部分页面中，我还为容器添加了一些垂直填充，他们也会打破jQuery选择子元素。

来源

2009-10-29 DA.

如果你把一个显示这两种情况下演示，我保证会有人告诉你，你在做什么错，还是正确的。 – mkoryak 2009-10-29 17:01:42

这似乎不太可能......你如何穿越孩子？ – 2009-10-29 17:02:49

如果您也可以发布有问题的HTML片段，它可能会有所帮助。 – 2009-10-29 17:04:25

我相信我以前遇到过类似的东西 - 它可能是一个计时问题，在JS被告知绑定到元素后，DOM被渲染为slighlty。在你的情况下，填充可能会让firefox花费几毫秒的时间来渲染那些div，并因此导致绑定在有任何绑定之前触发。我知道Firebug也可以减慢渲染过程，因为它跳转点来渲染源代码。

要确认它不是这样，请尝试围绕您的绑定代码添加一个setTimeout(function(){ ... }, 500)（也可能关闭firebug）以查看它是否在此之后绑定。如果是这样，那么你的问题。

另一种方法可能会改变你的投入环节和使用事件代表团触发事件：jQuery('.btnSave').live('click', function(){savePanel($('selector>for>panel')); })

来源

2009-10-31 01:23:15

填充中断jQuery选择器？

回答

相关问题