jQuery function call issue
I have a plugin that I can set settings and call it when document ready. However, I want to change it to an "onclick" of a button instead of DOM ready.
the plugin goes like
(function($) {
$.fn.addressSearch = function(settings) {
settings = jQuery.extend({
searchClass: "quickSearch",
checkElement: "href",
dataElement: "data",
countryListClass: "countryList",
countryCode: "11455",
errorMsg: "You can only search for address in the UK.",
houseNumberClass: "TextboxHouseNumber",
postcodeClass: "postcode",
addressLine1Class: "addSearchLine1",
addressLine2Class: "addSearchLine2",
addressLine3Class: "addSearchLine3",
addressTownCityClass: "addTownCity",
ajaxUrl: "/WebService/addressLook",
submitType: "POST",
dataType: "xml",
parameters: "",
addressProcessURL: "",
callbackFunctionSingleAddress: selectAddress,
callbackFunctionMultipleAddress: quickBoxSearch,
useExternalProcessPage: false,
validateCountry: true
}, settings);
var jQueryMatchedObj = this;
function _initialize() {
_startModal(this, jQueryMatchedObj);
return false;
}
function _startModal(objClicked, jQueryMatchedObj) {
$j(objClicked).addClass(settings.searchClass);
var countryList = "." + settings.countryListClass + "";
if (settings.validateCountry) {
if ($j(countryList) && $j(countryList).val() != settings.countryCode) {
alert(settings.errorMsg);
return false;
}
}
if (settings.parameters) {
$j.ajax({
url: settings.ajaxUrl,
type: settings.submitType,
dataType: settings.dataType,
data: settings.parameters,
success: function(res) {
var addresses = eval(res.getElementsByTagName('string')[0].firstChild.data);
if (addresses.length == 0)
alert('Your address could not be found, please enter it manually');
else if (addresses.length == 1) {
settings.callbackFunctionSingleAddress(
addresses[0].addressLine1,
addresses[0].addressLine2,
addresses[0].addressLine3,
addresses[0].town,
settings.TextboxHouseNumber,
settings.postcodeClass,
settings.addressTownCityClass,
settings.addressLine1Class,
settings.addressLine2Class,
settings.addressLine3Class
);
} else if (addresses.length > 1) {
settings.callbackFunctionMultipleAddress(
settings.call开发者_StackOverflowbackFunctionSingleAddress,
addresses,
settings.useExternalProcessPage,
settings.TextboxHouseNumber,
settings.postcodeClass,
settings.addressTownCityClass,
settings.addressLine1Class,
settings.addressLine2Class,
settings.addressLine3Class
);
}
}
});
}
return false;
}
//return this._initialize();
return this.unbind('click').click(_initialize);
}
})(jQuery);
this works wihtout any problem when call on DOM ready I call it as below;
$("#mydiv").addressSearch({
searchClass:"foo",
});
I want to call this on the onclick of the same div. how do i do it? when I try below it says "addressSearch undefined"
$("#mydiv").click(function(){
addressSearch({
searchClass:"foo",
});
});
Where have I gone wrong?
Well you've written a plugin, so you have to use it like part of jQuery.
$('#mydiv').click(function() {
$(this).addressSearch(/* ... */);
});
Doesn't that need to be:
$("#mydiv").click(function(){
$("#mydiv").addressSearch({
searchClass:"foo",
});
});
OR even
$("#mydiv").click(function(){
$(this).addressSearch({
searchClass:"foo",
});
});
精彩评论