innerHTML 工作 jQuery html() 不工作答案

【问题标题】：innerHTML works jQuery html() doesn'tinnerHTML 工作 jQuery html() 不工作
【发布时间】：2013-01-23 19:40:38
【问题描述】：

由于某种原因，我无法让 jQuery html() 函数工作。我尝试了以下方法：

找到一个特定的div：

var div = $("#divId");

结果：作品
测试我是否可以将它与 jQuery 一起使用：

alert($(div).attr("id"));

结果：作品；显示ID
获取div内的html：

alert($(div).html());

结果：不起作用；空警报
用 innerHTML 获取 div 内的 html：

alert(document.getElementById($(div).attr("id")).innerHTML);

结果：作品； div 内容显示在警报中

实际代码：

$(document).ready(function(){

var autocomp = namespace('mx.autocomp');

autocomp.overlay = (function() {

    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[formId + "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());

        // Edit1: New test, this works.
        // When I use this javascript, I start with initializing the script from the page
        // using the "init(inFormId, inSearchValue)" function. The handleOverlay() function
        // is called through the "oncomplete='mx.autocomp.overlay.handleOverlay();'" of a
        // p:remoteCommand that executes a search in the db and then update the div called
        // "searchResultComp".
        //
        // Only reason I can think of why the code below works is that the jQuery object $test 
        // is created after the div called "searchValueComp" has been updated by p:remoteCommand.
        // However, I don't understand why the jquery object "searchValueComp" wouldn't have
        // access to the same content as it should look for it first when the html() function 
        // is called. Or is the content of the div searchValueComp set immediately when the 
        // object is created in the "init" function?
        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();
        }

    }

    function print(text){
        $("#textCheck").prepend(text + '\n');
    }

    return {
        handleOverlay: handleOverlay,
        init: init
    };

})();

});

我做错了什么？

【问题讨论】：

愿意提供一个 jsfiddle 吗？一定是其他代码有问题。
只是一个细节：你不需要将变量 div 包裹在 $() 中，因为你已经将它定义为一个 jQuery 对象 $("#divId")
使用div.html() 而不是$(div).html，因为您已经将 div 元素包装到了 jQuery 命名空间中。
您的代码按原样工作。 jsfiddle.net/ggMf6 除非你能证明它不能以我们可以测试/重新创建的方式工作，否则我们无法帮助你。
另外，这个：$searchValueComp.text.length 并不像你认为的那样。

标签： javascript jquery

【解决方案1】：

试试这个

HTML

<div id="mydiv">
    <select class="myclass">...</select>
    <select class="myotherclass">...</select>
</div>

JS 代码

var $div = $('div');
alert($div.html());

LIVE DEMO

【讨论】：

【解决方案2】：

Peter Campbell 在这个问题的后续问题中给了我答案：Is the "content" of a jquery object set immediately at creation?

显然，我必须重新初始化变量 searchResultComp 以获得预期的结果。

【讨论】：

【解决方案3】：

将 jQuery 对象分配给变量时，通常以 $ 开头的变量以使其作为 jQuery 对象脱颖而出。这不会影响您的代码，但从开发人员的角度来看更容易。

var $div = $('div');

要获取 html，请执行以下操作：

$div.html();

【讨论】：

我不是 dv，但这显然不是他的代码不起作用的原因。虽然这不是一个坏建议。
这行得通。该问题可能是开发人员的语法错误。没有看到更多代码是不可能提供帮助的。
是的，但我提供了一个更清洁的替代方案，这是一个有效的答案。如果原始问题有工作代码，那么该问题应该被否决。不是我的答案。

【解决方案4】：

你需要引用 div，像这样：

$("div").html();

另外，如果页面上有多个 div 元素，则需要指定一个。您可以通过添加一个类或使用 .eq() 过滤结果来做到这一点。

这是一个例子。 http://jsfiddle.net/W8qkE/

【讨论】：

由于上面 OP 概述的过程使用 div 作为 $('#divId') 的变量，它应该仍然有效。肯定有其他问题。