开发者

Jquery problem: each only uses last object

I have to following code in HTML:

$(document).ready(function(){
 jQuery(".test").each(function(index) {
  jQuery(this).someObject({attr : index});
 });
});

someObject looks like this (see Edit2.5)

I have an onclick event on that object. If it is clicked it executes the function "someFunc" (which it does).

The Problem is, it alerts only the last index. Let's say I have 5 objects with the class ".test". If I click any of the someObject it created, it will always alert index of the last object.

Edit: Ok I forgot an important detail. In the 'someObject' I create a div which contains a table and each td has an onclick function which would execute the function 'someFunc'.

If I make 'someFunc' privat with this:

var someFunc = function(){
  alert(settings.attr);
}

The browser creates an error "Object expected".

Edit2.5: The entire 'someObject'

(function($){  
    $.fn.someObject = function(options){

        // Set default Settings
        var settings = {
            dpButtonImage : "images/icon.png",
            dpButtonClass : "Button",
            openOnFocus : false
        };

        $.extend(settings, options);

        var someFunc = function(){
            alert(settings.arr);
        }

        var displayPicker = function(target, counter){
            var offset = jQuery(target).offset();
            var height = jQuery(target).outerHeight();

            drawPicker(target, offset, height);
        }

        var drawPicker = function(target, offset, height){
            if (!document.getElementById("Wrapper")){
                $("body").append(function(){
                    return $("<div></div>")
                        .addClass("Wrapper")
                        .attr({
                            id : "Wrapper"
                        })
                        .css({
                            display : "none"
                        });
                });
            }

            // Create container element.
            var container = $("#Wrapper");

            // Move the wrapper to the proper coordinate.
            container.css({
                top: offset.top + height + 1,
                left: offset.left
            });

            // Toggle the visibility.
            if (container.is(":visible")){
                container.hide();
            } else {
                container.show();
            }

            refreshPicker2();
        }

        refreshPicker2 = function(){
            var html = $("<table><tbody><tr><td>Test</td></tr></tbody></table>");
            html.find("td").click(someFunc);
            $("#Wrapper").html(html);
        }

        return this.each(function(){
            var target = this;
            var $target = $(this);
            var counter = $.event.guid++;
            var readonly = $(target).attr("readonly");

            target.settings = settings;

            if (target.settings.openOnFocus){
                $target.bind("focus", function(){
                    if (!readonly){ displayPicker(target, counter); }
                });
            }

            // Append dpButton if it doesn't 开发者_如何学运维already exist.
            if (!document.getElementById('dpButton_'+counter)){
                $target.after(function(){
                    return $("<img />")
                        .addClass(target.settings.dpButtonClass)
                        .attr({
                            src : target.settings.dpButtonImage,
                            alt : "testicon",
                            id  : "dpButton_"+counter
                        })
                        .bind("click", function(){
                            if (!readonly){ displayPicker(target, counter);}
                            return false;
                        });
                });
            }
        });
    };  
})(jQuery);


Without var, you're creating someFunc as a global function, and it's being overwritten each time, so this:

someFunc = function(){
  alert(settings.attr);
}

Should be:

var someFunc = function(){
  alert(settings.attr);
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜