jQuery Plugin - 传递和执行任意函数答案

【问题标题】：jQuery Plugin - passing and executing an arbitrary functionjQuery Plugin - 传递和执行任意函数
【发布时间】：2011-02-20 21:00:49
【问题描述】：

我是 JQ 的新手，所以任何关于这方面的帮助表示赞赏，剩下的颅卵泡很少受到创伤......

我有一个简单的 jQuery 插件，它使用 Ajax 使用 AppendTo 填充带有结果（作为一系列）的#selector (UL)。这是一个跨域调用，所以据我所知，只支持 asych:true。

插件可以工作，但我需要允许用户使用任意函数（即由插件用户确定的函数，如 $(".foo").draggable() 或其他）并在外部执行它该插件不起作用，因为我们是跨域和异步的。

我想我需要在运行时将任意函数传递给插件，但这是我能做到的。我已经摆弄了 delegate()/trigger() 和 bind(namespcae.bar) 但到目前为止还没有成功......

应该如何处理？

调用如下所示：

        $(document).ready(
        function () {
            $('#targetDiv').myPlugin({ count: 10});
            //$(".foo").draggable(); // does not work, because we are async.
        });

插件如下所示：

    (function ($) {
    $.fn.myPlugin = function (options) {  
    $.ajaxSetup({ cache: true, async: false }); // false doesn't work - cross domain  
    var defaults = {count: 5};  
    var options = $.extend(defaults, options);  
    return this.each(function () {  
    var obj = $(this);  
    $.ajax({  
        type: 'GET',  
        async: false,  
        dataType: 'json',  
        data: {},  
        url: 'http://someurl.com?callback=?&otherstuff=somedata',  
        success: function (data) {  
            $.each(data.results, function (i, item){  
               t = $(<LI class='foo'> + item.text </LI>').appendTo(obj);  
               // this works but may need any arbitrary jQuery.ui function  
               //t = $(item.text).appendTo(obj).draggable();  
               // maybe this but not sure how it should be done  
               //$(t).trigger(ArbitraryEventHandler); ???

【问题讨论】：

标签： jquery ajax function plugins asynchronous

【解决方案1】：

将回调传递给您的插件。比如：

$('#targetDiv').myPlugin({ count: 10, callback: function(element){
    element.draggable(); // Or whatever you want to do with your item
}});

然后在ajax成功例如调用这个回调：

    success: function (data) {  
        $.each(data.results, function (i, item){  
           t = $(<LI class='foo'> + item.text </LI>').appendTo(obj);  
           options.callback(t);

【讨论】：

非常感谢...看起来我想出了大致相同的答案（见下文），尽管您的直接在通话中使用该功能看起来更简洁...非常感谢！

【解决方案2】：

这看起来像是在 jQuery 1.5 中使用新的 deferred object 的好案例（$.ajax() 可以在幕后使用。基本上，它允许您排队回调以在何时执行您的 ajax 调用成功完成（或在出错时调用）。

【讨论】：

【解决方案3】：

感谢您的回答，我想在某个时候查看 1.5，我肯定会看看它是否有效（听起来不错）......我想出了以下内容，而其他人发布了基本相同的解决方案，但是更干净一点...问题解决了，谢谢大家

首先，在 DocumentReady 块之外创建这样的任意函数：

function myArbitraryFunction(t) { // do some work...}

然后在插件选项中添加一个选项：

var defaults =  {
    count: 5,
    itemFunction:null};

然后在对插件的调用中，这个小技巧最终将指向 ArbitraryFunction 的指针作为选项值传递

$("#targetDiv").myPlugin( { count: 10, itemFunction: function () { my ArbitraryFunction(t) }});

最后在ajax成功代码块中：

success: function (data) {
    $.each(data.results, function(i, item){
        t = $(<LI class='foo'> + item.text </LI>').appendTo(obj);
        // here is the magic !!
        if(option.itemFunction != null){
             options.itemFunction(t)
        }
....

很多部件要连接，但到目前为止它似乎工作......

【讨论】：