未捕获的类型错误：对象 #<HTMLLIElement> 在 Chrome 中没有“查找”方法

Question

可能与：Uncaught TypeError: Object #<HTMLLIElement> has no method 'find'

---

这里是我的问题讨论的聊天：https://chat.*.com/rooms/17/conversation/tabs-issue
它继续到这里：https://chat.*.com/transcript/message/4373231#4373231

---

我正在做以下事情：

$(document).on({
"click": function () {
    $(this).addClass("active");
    $(".TaskRow").not(this).removeClass("active").removeClass("hoverActive");
    $(".TaskDetails").hide();
    $(document).off("keyup", "body", keyDownFn);
    keyDownFn = makeRelationships(this);
    $(document).on("keyup", "body", keyDownFn);
    var thisTaskDetails = ".task" + $(this).data("id") + "Details";
    if (detailsArray[thisTaskDetails] !== undefined) {
        detailsArray[thisTaskDetails].show();
        var td = $(".taskDetails", detailsArray[thisTaskDetails]);
        if ($(".hide", detailsArray[thisTaskDetails]).length) {
            toggleMCE(td, $(".taskCopy", detailsArray[thisTaskDetails]))
            $("#" + td.attr("id") + "_parent", detailsArray[thisTaskDetails]).show();
        }
    } else {
        var thisID = $(this).data("id"),
            displayTask = function () {
                $.get(WEBROOT + INDEX + "/Task/displayTask/" + thisID, function (data) {
                    var domElement = $(data),
                        saveThis = function () {
                            $("form", domElement).trigger("submit");
                            return true;
                        },
                        taskDetails = $(".taskDetailsArea", domElement);

                    console.log(domElement);
                    detailsArray[thisTaskDetails] = domElement.appendTo(bottomLeftPane);
                    detailsArray[thisTaskDetails].tabs();  //ERROR HERE
                    console.log(domElement, detailsArray);
                    //*
                    taskDetails.tinymce({
                        // Location of TinyMCE script
                        script_url: INDEX + '/js/tiny_mce/tiny_mce.js',

                        // General options
                        theme: "advanced",
                        plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",

                        // Theme options
                        theme_advanced_buttons1: "save,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
                        theme_advanced_buttons2: "pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,insertdate,inserttime,preview,|,forecolor,backcolor",
                        theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,ltr,rtl,|,fullscreen",
                        theme_advanced_toolbar_location: "top",
                        theme_advanced_toolbar_align: "left",
                        theme_advanced_statusbar_location: "bottom",
                        theme_advanced_resizing: true,

                        //Saving:
                        save_enablewhendirty: true,
                        save_onsavecallback: saveThis,

                        //                                    width: $("#leftPane").width(), height: $("#leftPane").height(),

                        //Setup:
                        setup: function (ed) {
                            console.log(ed, "setup");
                            ed.onChange.add(function (ed) { //blur
                                console.log('Editor was changed: ' + ed.id);
                                saveThis();
                                //                                          toggleMCE(taskDetails, $(".taskCopy", domElement));
                            });
                            ed.onClick.add(function (ed, evt) { //focus
                                console.log('Editor was clicked: ' + ed.id, evt);
                            });
                        }
                    });

                    $("form", domElement).on("submit", function (e) {
                        e.preventDefault();
                        var posts = $(this).serialize();
                        $.post(WEBROOT + INDEX + "/Task/changeSomething", posts);
                        return false;
                    });
                    $("form", domElement).on("focus", function (e) {
                        e.preventDefault();
                        console.log("focused on body", e);
                        return false;
                    });
                    //*/
                });
            };

        if (thisID !== undefined) {
            displayTask();
        } else {

        }
    }
}
}, ".TaskRow");

整个错误仅发生在 第二 加载此函数时。它失败了detailsArray[thisTaskDetails].tabs();

这是堆栈跟踪：

Uncaught TypeError: Object #<HTMLLIElement> has no method 'find' jquery.js:2
e.fn.e.init jquery.js:2
e jquery.js:2
(anonymous function) jquery-ui-1.8.9.custom.min.js:446
e.fn.e.map jquery.js:2
e.extend.map jquery.js:2
e.fn.e.map jquery.js:2
d.widget._tabify jquery-ui-1.8.9.custom.min.js:445
d.widget._create jquery-ui-1.8.9.custom.min.js:443
b.Widget._createWidget jquery-ui-1.8.9.custom.min.js:30
b.widget.b.(anonymous function).(anonymous function) jquery-ui-1.8.9.custom.min.js:28
b.widget.bridge.b.fn.(anonymous function) jquery-ui-1.8.9.custom.min.js:29
e.extend.each jquery.js:2
e.fn.e.each jquery.js:2
b.widget.bridge.b.fn.(anonymous function) jquery-ui-1.8.9.custom.min.js:29
$.on.click.displayTask :2525/#tabs-25:502
f.Callbacks.n jquery.js:2
f.Callbacks.o.fireWith jquery.js:2
w jquery.js:4
f.support.ajax.f.ajaxTransport.send.d jquery.js:4

我正在使用Chrome 20+

---

##旁白：

$.get 中返回的内容来自 php：

<div class="TaskDetails Task task<?php echo $task['Task']['taskId']; ?>Details">
    <ul>
        <li><a href="#tabs-1">Details</a></li>
        <li><a href="#tabs-2">Users</a></li>
        <li><a href="#tabs-3">Array</a></li>
    </ul>
    <div id="tabs-1" style="padding: 0px; height: 100%; width: 100%;">
        <form method="post" data-row="<?php echo $task['Task']['taskId']; ?>">
            <?php 
            $details = $task['Task']['taskDetails'];
            $details = nl2br($details);
            $details = str_replace(array("\\r\\n", "\\r"), "\n", $details);
            $details = implode("",explode("\n", $details));
            $details = stripslashes($details);
            ?>
            <textarea id="task<?php echo $task['Task']['taskId']; ?>Details" name="changedTo" class="Task task<?php echo $task['Task']['taskId']; ?> taskDetails taskDetailsArea"><?php echo $details; ?></textarea>
            <div id="task<?php echo $task['Task']['taskId']; ?>Details" class="taskCopy"><?php echo $details; ?></div>
            <input name="changed" value="taskDetails" type="hidden"/>
            <input name="row" value="<?php echo $task['Task']['taskId']; ?>" type="hidden"/>
        </form>
    </div>
    <div id="tabs-2" class="Task task<?php echo $task['Task']['taskId']; ?> taskUsers">
        <?php echo $task['Task']['taskUsers']; ?>
    </div>
    <div id="tabs-3" class="Task task<?php echo $task['Task']['taskId']; ?>">
            <pre><?php print_r($task);?></pre>
    </div>
</div>

##更多信息： detailsArray 开头是一个空对象 {}。
var thisTaskDetails = ".task" + $(this).data("id") + "Details";
$(this) 是被点击的任意 DOM 元素。

Answer 1

这可能会帮助比我零更好的程序员解决方案：

上周我在自己编写的 JS 页面构建器界面上注意到了这个错误。 （没有 TinyMCE，但有大量的 jQuery 插件。）我得出了与这张票的作者相同的结论，即 jQuery 错误地在普通 DOM 元素上调用 find()。

有趣的是，当您关闭 Chrome 调试器时，问题就消失了。 （我敢肯定，我们都可以体会到这句话的讽刺意味。）

我知道这不会让您更接近解决方案，但至少您可以放心，您的 99.9% 的用户（除非他们来自 *，我想他们）可能永远不会看到这个问题。

Answer 2

我相信这是 Google chrome 文档检查器中的一个错误。有一系列相关的错误。它不会发生在其他浏览器中。一件好事是大多数用户不会发现这个错误。另一方面，我在尝试使用文档检查器调试问题时浪费了 3 个小时，而实际的解决方案是关闭文档检查器！