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);
}
精彩评论