jquery插件:$ .fn出了什么问题。在我的插件?

时间:2011-06-30 23:54:08

标签: jquery ajax jquery-plugins

当我使用$.fn.

在插件中创建函数时,我的jquery插件出了什么问题

你可以看到我的意思here。我有两种形式,他们共享相同的插件,

     $(document).ready(function(){

        $("#search-title").post_form_public();
        $("#subscribe-email").post_form_public();

    });

触发第二个表单时,第一个表单将无法再次运行。

如果我只将插件附加到一个表单,它可以正常工作。

下面是插件代码中的一些更多细节,

post_form_public: function(options) {

    // Set the default values, use comma to separate the settings, example:
    var defaults = {
        top:            250, // The top of the proceesing popup and the result popup.
        width:          400 // The width of the proceesing popup and the result popup.
    }

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

    var $cm = this.submit(function(e){

        var object = $(this);

        // Get the path from attribute of action in the form.
        var target_postpath = object.attr('action');
        var top = o.top;
        var width = o.width;

        // Keep the lines below for checking.
        alert($cm.selector);

        // Disable the submit button so that you won't click it twice while the ajax is processing the form.
        // Must use true or false for jquery > 1.6.
        $('input[type=submit]',$($cm.selector)).attr('disabled', true).css({opacity:0.4});

        // Post the form .
        $.post(target_postpath,object.serialize(),function(xml){

            //process_posted(xml); // two forms work fine with this!
            $.fn.post_form_public.process_posted(xml); // but not with this!

        });

        return false;

    });

    // Callback function for proccesing the deleted item.
    //function process_posted(xml)
    $.fn.post_form_public.process_posted = function(xml)
    {

        // Enable the submit button again after processing the xml output.  
        // Must use true or false for jquery > 1.6.
        $('input[type=submit]',$($cm.selector)).attr('disabled', false).css({opacity:1});

    }

}

但是,如果我只使用$.fn.来创建函数,那么这两个表单将正常工作。如何使用$.fn.并使多个表格有效??

或者您可以看到代码here

感谢。

2 个答案:

答案 0 :(得分:1)

变量

$.fn.post_form_public.process_posted

...只能存储一个功能。第二次调用插件时,这将被覆盖。在有效的形式中,您有一个函数,它对$cm变量的值形成一个闭包 - 您为每次调用post_form_public创建了其中一个函数。

功能形式的问题是什么?

将其存储在post_form_public对象中的一种方法可能类似于:

if(!$.fn.post_form_public.process_posted) $.fn.post_form_public.process_posted = {};
$.fn.post_form_public.process_posted[$cm.selector] = function(xml) {
  //...
};

...并在post回调中使用以下内容进行调用:

$.fn.post_form_public.process_posted[$cm.selector](xml);

答案 1 :(得分:0)

该代码看起来非常适合。重新排序了一些东西,这应该可以解决问题。

http://jsfiddle.net/trgpa/

无法在jsfiddle上自行测试,因为jsfiddle上的ajax post请求'search_title_xml.php'会抛出404.