I am creating the function Bricks(). It works the first time it is called, but when I call it later with another event, I get an error saying that Bricks() hasn't be defined. What could I be doing wrong?
Function Created:
<script>
$(document).ready(function(){
function Bricks() {
var $container = $('#timeline-posts-wrap');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector:'.post-wrap'
});
});
}
Bricks();
});
</script>
Called Upon later:
<script>
$(document).ready(function() {
$(".comment-button").click(function() {
$(this).parents(".post-bottom").find(".commenting-area").toggle();
Bricks();
});
});
</script>
Because the function Bricks is defined in closure scope(the dom ready handler) so it will be available inside that dom ready handler only.
If you want to use it in a different scope, you need to define the function in a shared scope, in this case you can use the global scope(window scope), that is define the function outside the dom ready handler
function Bricks() {
var $container = $('#timeline-posts-wrap');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.post-wrap'
});
});
}
$(document).ready(function () {
Bricks();
});
Another solution as suggested by #AlienArrays is to move the contents of both document ready handlers to one so that both of them will share the same closure scope
$(document).ready(function () {
function Bricks() {
var $container = $('#timeline-posts-wrap');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.post-wrap'
});
});
}
Bricks();
$(".comment-button").click(function () {
$(this).parents(".post-bottom").find(".commenting-area").toggle();
Bricks();
});
});
To be able to reference your function globally, you must define it globally:
$(document).ready(function(){
window.Bricks = function () {
var $container = $('#timeline-posts-wrap');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.post-wrap'
});
});
};
Bricks();
});
Note: there are better, cleaner ways to write the above code, but this serves as an answer to the question at hand.
Related
Why following code written in jquery works great, but when I try to use it with vanilla js then it’s not working.
Here is WP Heartbeat API code - https://github.com/WordPress/WordPress/blob/master/wp-includes/js/heartbeat.js
jQuery(document).ready( function($) {
$(document).on('heartbeat-tick', function() {
console.log('jquery');
});
});
jQuery(document).ready( function($) {
document.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS');
});
});
jQuery(document).ready( function($) {
var event = new Event('heartbeat-tick');
window.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS');
});
window.dispatchEvent(event);
});
Your document event is not firing because you are dispatching the event on the window. Call document.dispatchEvent to dispatch it to the document.
jQuery(document).ready(function($) {
var event = new Event('heartbeat-tick');
$(document).on('heartbeat-tick', function() {
console.log('jquery');
});
document.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS from document');
});
window.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS from window');
});
console.log('window');
window.dispatchEvent(event);
console.log('document');
document.dispatchEvent(event);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I want to set #first and #second as $(this) to use element id only when function is calling.
is it possible?or any other way?
(function( $ ){
$.fn.showCircle = function(top,right) {
$timeout(function () {
$(this).css({
right:right,
top:top,
});
});
};
})( jQuery );
$('#first').showCircle(300,200);
$('#second').showCircle(800,200);
You can use jQuery.proxy() to set this at a function call
$timeout($.proxy(function () {
$(this).css({
right:right,
top:top,
});
}, this));
thanks to #panther comment inside $timeout this refer to window so as #panther said I changed the function :
(function ($) {
$.fn.showCircle = function (top, right) {
var self = this;
$timeout(function () {
$(self.selector).css({
right: right,
top: top,
});
});
};
})(jQuery);
I have a very simple jquery plugin that creates a button and appends it to the element:
(function($) {
$.fn.somePlugin = function(element, options) {
var button = '<button>Hello World</button>';
$(element).append(button);
var sayHello = function(){
alert('Hello World');
}
};
})(jQuery);
My question is, how do I call the sayHello function when the button is clicked? TIA!
You can transform your HTML code into a jQuery object using $('<button>Hello World</button>'), and then you can attack a click event to it like you would with any other jQuery object:
(function($) {
$.fn.somePlugin = function(element, options) {
var button = '<button>Hello World</button>';
var sayHello = function(){
alert('Hello World');
}
var $button = $(button).click(sayHello);
$(element).append($button);
};
})(jQuery);
Create a jQuery object, bind the click event with the object then append it to the container element.
(function($) {
$.fn.somePlugin = function(element, options) {
var sayHello = function() {
alert('Hello World');
}
var button = $('<button>Hello World</button>');
button.on('click', sayHello);
button.appendTo(element);
};
})(jQuery);
plugin code:
(function ($) {
$.fn.somePlugin = function (el, options) {
var $el = $(this);
$el.append("<button>Hello World</button>");
$el.on("click", "button", function(){
alert("Hello World");
});
};
})(jQuery);
Simple html:
<div id="target"></div>
Usage of plugin:
$("#target").somePlugin();
jsfiddle test
I have a JQuery script that I run multiple times, with multiple events. I would like to save space and turn it into a function to call whenever I need it. How do I do this in JQuery?
My JQuery Script:
var $container = $('#timeline-posts-wrap');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.post-wrap'
});
});
You can simply extract the function:
var $container = $('#timeline-posts-wrap');
$container.imagesLoaded(afterImagesLoaded);
function afterImagesLoaded(){
$container.masonry({
itemSelector : '.post-wrap'
});
}
It's not "jQuery specific", simply javascript functions.
I am learning jQuery and I'm finding that this code is not working:
<script type="text/javascript">
$(document).ready(
/* Navigtion Stuff */
function(){
$('.menu ul').hover(
function(){
$(this).parent().addClass("active");
},
function(){
$(this).parent().removeClass("active");
}
)
},
function(){
$(".menu").parents("li").addClass("active");
}
);
</script>
The first function does what it is supposed to. The second function does not. Is my syntax bad? If not, then I have a feeling that my code is conflicting with some other Javascript on the page.
Thanks in advance!
you have a little confusion with the brackets
$(document).ready(
/* Navigtion Stuff */
function(){
$('.menu ul').hover(
function(){
$(this).parent().addClass("active");
},
function(){
$(this).parent().removeClass("active");
}
);
$(".menu").parents("li").addClass("active");
}
);
is better.
The ready function only takes one parameter. You are trying to pass two functions.
function 1 :
function(){
$('.menu ul').hover(
function(){
$(this).parent().addClass("active");
},
function(){
$(this).parent().removeClass("active");
}
)
}
function 2:
function(){
$(".menu").parents("li").addClass("active");
}
To bind the hover event to $('.menu ul') and add 'active 'class to $(".menu").parents("li") you should do
$(document).ready(function() {
/* Navigtion Stuff */
$('.menu ul').hover(
function(){
$(this).parent().addClass("active");
},
function(){
$(this).parent().removeClass("active");
}
);
$(".menu").parents("li").addClass("active");
});
The ready function only takes one function as a parameter. See the above posts for examples.