是否在创建时立即设置jquery对象的“内容”？

关于另一篇文章：innerHTML works jQuery html() doesn't，我想问一下，当我创建一个对象时，是否立即设置了由jQuery对象引用的div的内容。是否在创建时立即设置jquery对象的“内容”？

JSF页面：

<!-- initialize script with the formId and the id of the input --> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     mx.autocomp.overlay.init('formId', 'searchValue'); 
    }); 
</script> 

<!-- input text that at "keyup" calls on sendRemoteCommand --> 
<p:inputText 
    id="searchValue" 
    value="#{searchBean.searchValue}" 
    onkeyup="sendRemoteCommand();" /> 

<!-- PrimeFaces remoteCommand that executes db search --> 
<!-- and present result in "searchResult" div --> 
<p:remoteCommand 
    name="sendRemoteCommand" 
    actionListener="#{searchBean.complete()}" 
    update="searchResult" 
    oncomplete="mx.autocomp.overlay.handleOverlay();" /> 

<!-- PrimeFaces overlayPanel that is displayed if the search returned a result --> 
<!-- i.e. the div "searchResult" has content ($searchResult.html() has content) --> 
<p:overlayPanel 
    id="overlay" 
    widgetVar="overlayWid" 
    for="formId:searchValue" 
    showEvent="none"> 

    <h:panelGroup layout="block" id="searchResult"> 

     <!-- Content will be presented here after a p:remoteCommand is finished --> 

    </h:panelGroup> 

</p:overlayPanel>

如上所见，该脚本一旦页面已经准备好初始化。

脚本（部分）：

var formId; 
var $searchValueComp; 
var $searchResultComp; 

function init(inFormId, inSearchValue){ 
    formId = inFormId; 
    $searchValueComp = $("#"+inFormId).find("[id$="+inSearchValue+"]"); 
    $searchResultComp = $("#"+inFormId).find("[id$=searchResult]"); 
} 

function handleOverlay(){ 
    var fn = window["overlayWid"]; 
    var result = document.getElementById($searchResultComp.attr("id")).innerHTML; 

    if($searchValueComp.val().length==0){ 
     fn.hide(); 
    } 

    // Test - This does not work as I get an empty alert 
    alert($searchResultComp.html()); 

    // Test - This works. 
    var $test = $("#"+formId).find("[id$=searchResult]"); 
    alert($test.html()); 

    // I need to check if the div: "searchResultComp" has any content. 
    // As I don't get $searchResultComp.html() to work, I'm forced to 
    // use the "getElementById" way instead. 
    if(result.length==0){ 
     fn.hide(); 
    }else{ 
     fn.show(); 
    } 

}

如上所述，在“初始化” jQuery对象似乎没有访问到div的内容，而在“handleOverlay”创建jQuery对象一样。我期望的是，jQuery对象的“html（）”函数将实时检查内容，而不是 - 看起来 - 从创建时获取旧信息。因此，我的问题：

是否只有在创建对象时才引用jQuery对象的div的内容？

来源

2013-01-24 nivis

这是因为变量$ searchResultComp是在init函数中设置的，jquery对象本身是动态的，但不是使用jquery对象的查询的结果。

find（）方法查找jquery对象的所有后代，它们与您指定为查找条件的模式相匹配，并将它们作为新的jquery对象返回。如果没有匹配的后代，它将返回一个没有内容的jquery对象。您可以通过提醒对象的长度来测试它，它应该是零。

所以在handleOverlay函数中，您需要重置$ searchResultComp来查找所有现在符合条件的后代。

来源

2013-01-24 09:55:01

所以不可能创建一个jQuery变量，并且在它引用的对象（div）发生了任何变化后，查看这些变化？ – nivis

在这种情况下，当您在init（）中设置变量$ searchResultComp时，没有DOM内容供jquery返回，因为它尚未添加，所以对象为空。然后，当您在handleOverlay中请求对象的html（）时，它将返回null。 –

感谢您的解释！我感到非常沮丧，无法理解发生了什么。 – nivis

这取决于你何时打电话给你的init()函数。例如，如果您在DOM尚未准备好时调用它，则选择为空。

因此，无论何时使用$('#selector').find()，它都会给您在该确切时间选择元素。如果你把它放在你的handleOverlay()，它应该工作。

试着去适应jQuery event delegation，你将不必处理这样的事情。

来源

2013-01-24 09:53:02 koko

感谢您的提示。当文档准备就绪时调用init（）函数：$（document）.ready（function（）{mx.autocomp.overlay.init（'formId'，'searchValue'）; }）; – nivis

啊对，现在我看到你正在使用'.find（“[id $ =”+ inSearchValue +“]”）''。猜你想说'.find（“＃”+ inSearchValue）'？ – koko

该脚本用于JSF页面，因此该ID的构建方式类似于：[formId]：[someComponentId1]：[someComponentIdn]：searchValue。从表单开始，我使用.find（“[id $ =”+ inSearchValue +“]”）来获取以id结尾的组件。 – nivis

是否在创建时立即设置jquery对象的“内容”？

回答

相关问题