Question

我今天早上花了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选择子元素。

Answer 1

我相信我之前遇到过类似的事情 - 这可能是一个时间问题，在JS被告知要绑定到元素之后，DOM会呈现出轻微的变化。在你的情况下，填充可能会使firefox花费几毫秒来渲染那些div，从而导致绑定在有任何绑定之前触发。我理解Firebug也可以减慢渲染过程，因为它在点处跳入以在其帧中渲染源。

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

另一种方法可能是将输入更改为链接并使用事件委派来触发事件：jQuery('.btnSave').live('click', function(){savePanel($('selector>for>panel')); })

padding打破jQuery选择器？

1 个答案: