今天早上我花了 2 个小时试图弄清楚为什么我的 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”时，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 选择子元素。