Question

我刚发现......怪异？ ...在我们的一个脚本中。在该方法中，我们有以下javascript代码段：

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

使用带有以下命令的控制台（在chrome中）时，我得到以下结果：

使用Javascript：

elem.parentNode -> undefined

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元素上。我会再测试一下这个条件。

为什么$（element）.parent（）找到父节点，但javascript element.parentNode返回undefined？

1 个答案: