Question

我创建了一个jquery插件，它插入了元素#tweetFeed以及其他一些东西。当我调用我的插件，然后尝试在回调中的#tweetFeed中插入一个元素时，它不会插入它。有什么想法吗？

以下是调用插件的代码：

$(document).ready(function() {

    // add the sidebar plugin
    $('html').social(function() {

        //doesn't print anything...ARGGG!!
        console.log('#tweetFeed = '+ $('#tweetFeed').parent().html());
        //$('#tweetFeed').append("<p>TEST</p>");
        //alert("test alert");  // this works now!

        //this line does NOT work. Why?
        $('#tweetFeed').append('<script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: \'profile\',rpp: 4,interval: 6000,width: 250,height: 280,theme: {shell: {background: \'#333333\',color: \'#ffffff\'},tweets: {background: \'#ffffff\',color: \'#444444\',links: \'#e02046\'}},features: {scrollbar: false,loop: false,live: false,hashtags: true,timestamp: true,avatars: false,behavior: \'all\'}}).render().setUser(\'CSuitesIndepend\').start();</script>'); 
    }); 

});

您可以看到我的问题的实时示例here

编辑：添加@Nicos建议后，我的插件如下所示：

(function($) {
    $.fn.social = function(callback) {

        var defaults = {

        };
        var options = null;
        var settings = $.extend({}, defaults, options); 

        // stuff goes on here


        if(typeof callback == 'function'){
            callback.call(this);
        }
        return this;
    }
})(jQuery)

唯一的问题是当我尝试附加我的twitter js代码时，我会收到错误，你可以看到here。是什么导致了这些错误？警报工作得很好。

Answer 1

看，你的插件声明必须收到你想要收到的功能......

请删除插件末尾的代码。在进行更改之前，请将插件更改为最新版本。

之后你必须改变这2行：

$.fn.social = function() {
return this;

第一个看起来像这样：

$.fn.social = function(callback) {

第二个将会看到这个：

if(typeof callback == 'function'){
  callback.call(this, data);
}
return this;

最后一段代码确保你的插件会调用tha回调函数，如果你不这样做，则永远不会调用回调

如果您希望代码已更改，请查看here

P.S。我将删除此粘贴以保护您的插件，只是在您阅读时发出警告

Answer 2

我不熟悉插件，但我认为问题可能在于insertAfter。这将在选择中获取元素，然后将其插入参数指定的元素之后（在本例中为"<p>TEST</p>"）。显然，由于没有附加到文档，您看不到任何效果。（事实上，#tweetfeed将从原始文档中删除。）

您应该使用append代替。这将获取参数中的内容并将其附加到所选元素。我想这就是你想要的。

$('#tweetFeed').append("<p>TEST</p>");

Answer 3

在您的插件声明中，您应该写出类似的内容：

$.extend({
  myFunc : function(someArg, callbackFnk){
    // do something here
    var data = 'test';

    // now call a callback function
    if(typeof callbackFnk == 'function'){
      callbackFnk.call(this, data);
    }
  }
});

然后你可以这样打电话：

$('#elementId').myFunc(someArg, function(arg){
  // now my function is not hardcoded
  // in the plugin itself
  // and arg = 'test'
});

要查看更多内容，请查看此link

修改

您创建插件的方式无法将该功能用作回调，您永远不会调用它。只需添加它，它就会起作用

Answer 4

除非我在代码中遗漏了某些内容，否则它看起来不像$（）。social（）将函数作为参数，也不会触发回调，这可以解释为什么没有发生任何事情。我真的建议阅读这两篇关于常见jquery模式的文章：

http://docs.jquery.com/Plugins/Authoring

http://www.learningjquery.com/2007/10/a-plugin-development-pattern

调用我的jquery插件时没有进入回调

4 个答案: