I have several jQuery functions on my website but not on every page all of them are required.
All of them are exectued from one XXX.js file for example:
jQuery(function() {
$(".title").slug({
slug:'slug',
hide: false
}); });
and if any of the elements is missing the rest of the functions are not executed. How to execute for example this function only if the element exists?
The real answer is that the .slug() jQuery plug-in is quite poorly written. It's something like 20 lines of code and it's full of mistakes.
The proper place to fix this issue in in that plugin so it only has to be done once, not everywhere you use it. I would suggest changing that plug-in to this code which fixed a bunch of issues:
//
// jQuery Slug Generation Plugin by Perry Trinier ([email protected])
// Licensed under the GPL: http://www.gnu.org/copyleft/gpl.html
jQuery.fn.slug = function(options) {
var settings = {
slug: 'slug', // Class used for slug destination input and span. The span is created on $(document).ready()
hide: true // Boolean - By default the slug input field is hidden, set to false to show the input field and hide the span.
};
// merge options and settings
if(options) {
jQuery.extend(settings, options);
}
// save jQuery object for later use in callback
if (this.length > 0) {
var self$ = this.eq(0);
jQuery(document).ready( function() {
if (settings.hide) {
jQuery('input.' + settings.slug).after("<span class="+settings.slug+"></span>");
jQuery('input.' + settings.slug).hide();
}
self$.keyup(function() {
var slugcontent = jQuery(this).val();
var slugcontent_fixed = slugcontent.replace(/\s/g,'-').replace(/[^a-zA-Z0-9\-]/g,'').toLowerCase();
jQuery('input.' + settings.slug).val(slugcontent_fixed);
jQuery('span.' + settings.slug).text(slugcontent_fixed);
});
});
}
// return our jQuery object so it's chainable
return this;
};
This change fixes these issues with the prior code:
Note: This plug-in is written to only work with one slug field per page. As such, you should probably be using it with an id value like "#title" rather than a class name like ".title" because the id will never return more than one field and never get you into trouble that way.
I've verified that this code works here: http://jsfiddle.net/jfriend00/CJJGz/.
You could add an if before the code is called -
if ($(".title").length)
You can test the length of the returned jQuery object, if it has a length of zero, the selector was not matched and the element was not found, e.g:
if ($(".title").length) {
$(".title").slug({
slug:'slug',
hide: false
});
}
You can check if the element exist by check its size:
if ($(selector).length) {
// Do what you want
}
You could check if the element exists like this:
jQuery(function() {
if($('.title').length != 0) {
$(".title").slug({
slug:'slug',
hide: false
});
}
});
You can test for the existence of the elements you're working on and if they exist perform the action/function:
if ($('.title').length){
$(".title").slug({
slug:'slug',
hide: false
});
}
