帮助第一个jquery插件:ajax()的问题

时间:2011-09-24 22:59:30

标签: jquery ajax

我正在尝试构建一个jquery插件但需要一些帮助。我在firebug中收到以下错误:

  

无法在层次结构中的指定点插入节点

当我尝试实现填充div的ajax请求时,会弹出此错误。我明白错误是什么,但我不明白为什么。如果您有基于我的代码的其他提示,欢迎您随时宣布。提前谢谢你!

btw:我收到了来自ajax调用的正确回复,但是如果没有上面的错误我就无法插入: - (

/**
 * @author kasperfish
 */
(function($){
    $.fn.extend({
        widgetIt: function(options) {
            var defaults = {
                title: 'Widget Title',
                top: '50px',
                left: '400px',
                evenColor: '#ccc',
                oddColor: '#eee',
            };

            var options = $.extend(defaults, options);

            return this.each(function() {
                var o = options;

                $(this).css({'z-index': '10', display: 'inline-block', position: 'absolute', top: o.top, left: o.left});
                var header = $('<div style="min-width: 150px" class="ui-widget-header widgethead"></div>');
                var title =$('<div class="w_tit">' + o.title + '</div>');
                var content =$('<div class="w_content"></div>');

                // Append
                $(title).appendTo(header);
                $(header).appendTo(this);
                $(content).appendTo(this);
                $(this).draggable();

                // Binding
                $(header).dblclick(function() {
                    $(content).fadeToggle();

                    // AJAX load data
                    $.ajax({
                        url: "widgets/seedshare.widget.php",
                        context: content,
                        success: function() {
                            $(this).html(content);
                        }
                    });
                });
            });
        }
    });
})(jQuery);

HTML

<div id="adiv"></div>

关于文档加载

$('#adiv').widgetIt();

2 个答案:

答案 0 :(得分:1)

你有:

$(this).html(content);
此范围中的

this引用XHR对象,因此您尝试将一些内容插入到XHR对象中,这当然没有意义。

答案 1 :(得分:1)

正如Majid所说,你的ajax函数中的this指向XHR对象。如果您要执行的操作是将内容插入到标题对象中,则可以通过将代码更改为此来解决问题:

            // Binding
            $(header).dblclick(function() {
                $(content).fadeToggle();
                var self = this;
                // AJAX load data
                $.ajax({
                    url: "widgets/seedshare.widget.php",
                    context: content,
                    success: function() {
                        $(self).html(content);
                    }
                });
            });

如果您尝试将其插入页面中的其他位置,请使用jQuery选择器作为插入位置。