Question

我在JQ相当新，所以对此有任何帮助，很少有剩余的颅骨受到创伤......

我有一个简单的jQuery插件，它使用Ajax使用AppendTo将#selector（UL）与结果（作为一系列）一起填充。这是一个跨域调用，因此，据我所知，只支持asych：true。

该插件可以工作，但我需要允许用户使用任意函数（即插件用户确定的函数，如$（“。foo”）。draggable（）或其他）来命中附加的DOM项目，并在该插件不起作用，因为我们是跨域和异步。

我认为我需要在运行时将任意函数传递给插件，但这是我能得到的。我已经摆弄了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); ???

Answer 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);

Answer 2

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

Answer 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)
        }
....

很多部分要连线，但到目前为止似乎有效......

jQuery插件 - 传递和执行任意函数

3 个答案: