【发布时间】：2010-12-11 08:02:51
【问题描述】：
今天早上我花了 2 个小时试图弄清楚为什么我的 jQuery 函数在页面的一个部分起作用，而在另一部分不起作用。
我终于把它缩小到容器上的垂直填充。
如果我的 CSS 中有这个：
div.collapsiblePanel {
padding: 0px 1%;
}
然后，通过 jQuery，我可以找到父 (.collapsiblePanel) 元素，并可以遍历该 div 并操作子元素。但是，如果我将样式表中的这一件事更改为：
div.collapsiblePanel {
padding: 5px 1%;
}
然后jQuery 可以找到父级（.collapsiblePanel）但无法遍历子级。
疯了吧？关于发生了什么的任何理论？我在这个问题上一头雾水，认为它必须是我的 jQuery 的东西，但它最终是一个 CSS 问题。
根据请求，更多标记/css/代码的sn-ps：
（看似）不起作用的特定 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>
请注意，DIV 是由以前的 jQuery 函数创建并加载内容的。起初我认为这是一个时间问题，我试图将一个事件附加到一个尚未加载到 DOM 中的对象上。但是，这并不能解释为什么相同的功能可以在页面的其他地方起作用。我可以更改的一个变量会使这项工作或不工作最终是那一点 CSS 填充。如果在当前功能起作用的页面部分中，我还向容器添加了一些垂直填充，它们也会破坏 jQuery 选择子元素。
【问题讨论】：
-
如果你提供了一个演示这两种情况的演示，我保证有人会告诉你你做错了什么，或者是对的。
-
这似乎不太可能......你是如何穿越孩子们的？
-
如果您也可以发布有问题的 HTML 片段，这可能会有所帮助。
-
这是一大块 CSS、HTML 和 JS。我很想把它都贴出来，但那得晚点来。同时，我会尝试添加一些 sn-ps。