jquery - 使用 jQuery 创建 HTML 不起作用

Question

我正在尝试实现保罗的回答: How would I implement stackoverflow's hovering dialogs? .

但是，我的变量“err”一直评估为“NULL”。问题出在行 .css('left', element.position.left);

当我包含它时，err = NULL。当我把它拿出来时，err = 一个具有必要属性的对象。但我需要这个 CSS 语句。

(顺便说一下，我根据下面的建议更改了所有对 jQuery 的 $ 引用。)

这是我的代码:

jQuery('.member-only').click(function() {

    var element = jQuery(this);

    jQuery.ajax({
        type: 'POST',
        url: '/ajax/member',
        dataType: 'json',
        success: function(data)
        {
            var err = jQuery('<div></div>')
                        .addClass('member-check')
                        .append(data.msg)
                        .css('left', element.position.left);

            if (!(data.SignedIn))   // not signed in
            {
                element.after(err);
                err.fadeIn('fast');
            }
            // otherwise just continue
        }
    });

    jQuery('.member-check').live('click', function(){
        element.fadeOut('fast', function() {element.remove(); });
    });
});

谢谢。

Answer 1

如果没有更多上下文，很难说，但看起来您要么使用 $ 变量有其他东西 - 可能是 Prototype - 或者您调用了 jQuery.noConflict()。您使用 jQuery('.member-only').click() 附加单击事件，然后在该单击事件处理程序中使用 $.ajax() 。即使这不是问题的根源，您也应该选择对象名称之一(jQuery 或 $)并坚持使用，而不是来回切换。

您将 element 设置为 jQuery(this)，它是一个 jQuery 对象，而不是 DOM 节点。这是 jQuery 中的标准模式，为 jQuery 对象的变量添加 $ 前缀，因此您的代码将更具可读性，如下所示:

var $element = jQuery(this);
  ...
.css('left', $element.position().left);