javascript - 为什么 $(element).parent() 找到父 Node，但 javascript element.parentNode 返回 undefined？

Question

我刚刚发现了一个……奇怪的地方？ ...在我们的一个脚本中。在该方法中，我们有以下 javascript 片段:

        if (inside)
            elem.insertBefore(c, null);
        else
            elem.parentNode.insertBefore(c, elem.nextSibling);

当使用带有以下命令的控制台时(在 Chrome 中)，我得到以下结果:

Javascript:

elem.parentNode -> 未定义

Jquery

$(elem).parent(); -> <div class="btn-holder-right"><input onclick=" return handle_qa_submit_comment(5, 6, this);" value="Submit Comment" title="" type="submit" class="btn btn-community"></div>

我发现这种行为很奇怪，并且想知道为什么会发生这种情况。有什么建议吗？

首先 - 按钮的 onclick 处理程序将按钮本身发送到 onclick 事件中列出的函数

<input onclick=" return handle_qa_submit_comment(5, 6, this);" value="Submit Comment" title="" type="submit" class="btn btn-community">

该函数包含一些 ajax，它在我们的网站上执行一些操作，例如提交评论

function handle_qa_submit_comment(postId, parentPostId, elem){
    var ajaxUrl = '../forum/qa-include/app/handler.php';
    var data = { 
                    action : 'add_comment',
                    data :
                    {
                        'postId' : postId,
                        'parentPostId' : parentPostId,
                    }
                };
    try
    {               
        $.ajax({
            url: ajaxUrl,
            data: JSON.stringify(data),
            contentType: 'application/json',
            async: true, 
            type: 'POST'
        }).done(function(jqxhr,textStatus){
            if (jqxhr !== 'true' && textStatus !== 'success'){
                return handle_qa_submit_comment_failed(403, null);
            }
            else {
                qa_submit_comment(postId, parentPostId, $(elem)); // calls 
            }
        }).error(function(){
            return handle_qa_submit_comment_failed(404, null);
        });
    }
    catch (exception)
    {
        return handle_qa_submit_comment_failed(500, exception); 
    }
}

ajax 完成后:

function qa_submit_comment(questionid, parentid, elem)
{
   ...do stuff...
   qa_show_waiting_after(elem, false);
}

最后:

function qa_show_waiting_after(elem, inside)
{
    var c = 'some html....';
    if (elem && !elem.qa_waiting_shown) {

            if (inside)
                elem.insertBefore(c, null);
            else
                elem.parentNode.insertBefore(c, elem.nextSibling); // fail here because elem.parentNode is undefined. when I test $(elem).parent() it finds the actual parent.
    }
}

Answer 1

qa_submit_comment(postId, parentPostId, $(elem)); // calls 

qa_submit_comments 中的 elem 引用是 JQuery 引用，而不是 DOM 元素。尝试传递 $(elem) 而不使用 $(...) 例如:

qa_submit_comment(postId, parentPostId, elem); // calls 

或者在函数 qa_submit_comment 中解开它

elem = elem[0];  // unwrap JQuery object to real element

此外，这里可能存在一个错误(尽管不是 100%)

if (elem && !elem.qa_waiting_shown)

根据您首先设置 qa_qaiting_shown 的方式，这可能始终评估为 false，因为它可能位于 DOM 元素或 JQuery 元素上，但也可能位于您的 DOM 元素上。我会进一步测试这个条件。