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
Related
I have problems with Bootstrap (3.3.4) popovers. My html code for the popover is in the data-html tag, which also contains a class link_click. The jQuery click function for this class doesn't work. Why is jQuery not seeing this link_click class from data-content field of the popover? What to change?
popover = 'Main-Objekt';
$('#popover_test').html( popover );
$('[data-toggle="popover"]').popover({ trigger:"manual", animation:false})
.on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});})
.on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 100);
});
$('.link_click').click( function(){
alert('Click success!');
});
Thanks
Michael
Event delegation for dynamic content:
$('#popover_test').on('click', '.link_click', function(){
alert('Click success!');
});
When the blue button is clicked it affects both buttons
http://jsfiddle.net/umbriel/Lwvukzhy/1/
My setup looks like this
var
$window = $(window),
$body = $('body'),
$buttonRight = $('.button .right')
;
$buttonRight.on('click', function( ) {
buttonReveal( $( this ) );
});
function buttonReveal() {
$buttonLeft.css({'width':'25%'});
$buttonRight.css({'width':'75%'});
}
I want to to only affect one of buttons I clicked
Thank you
Use .siblings() to get siblings. Try this:
$buttonRight.on('click', function( ) {
buttonReveal($(this)); //$(this) refers to current clicked element (button)
});
$buttonLeft.on('click', function() {
buttonHide($(this)); //$(this) refers to current clicked element (button)
});
function buttonReveal(element) {
element.siblings($buttonLeft).css({'width':'25%'}); //to apply css to siblings use .siblings()
element.css({'width':'75%'});
}
function buttonHide(element) {
element.css({'width':'0%'});
element.siblings($buttonRight).css({'width':'100%'});
}
DEMO
You need to target the left/right buttons which is related to the clicked button. So you need to pass the clicked button to buttonReveal() and buttonHide().
So
(function (window, $) {
var
$window = $(window),
globalTimeout = null,
$body = $('body'),
$buttonRight = $('.button .right'),
$buttonLeft = $('.button .left');
$buttonRight.on('click', function () {
buttonReveal(this);
});
$buttonLeft.on('click', function () {
buttonHide(this);
});
function buttonReveal(button) {
var $btn = $(button).css({
'width': '75%'
});
$btn.prev('.left').css({
'width': '25%'
});
}
function buttonHide(button) {
var $btn = $(button).css({
'width': '0%'
});
$btn.next('.right').css({
'width': '100%'
});
}
}(window, $));
Demo: Fiddle
As it stands the remove function doesn't work. Any suggestions?
var toggle = new function() {
$(document).on('click', 'img', function () {
$(this).parent().toggle('slide');
})
}
var remove = new function() {
$(document).on('click', 'img',
setTimeout(function () {
$(this).parent().remove();
}, 1000);
)
}
The function your are looking for is .queue(). It will execute a provided callback after the previous animation has finished:
$(document).on('click', 'img', function() {
var $entry = $(this).parent();
$entry.toggle('slide').queue(function(next) {
$entry.remove();
next();
});
});
Working example: http://jsfiddle.net/rbBgS/
I recently implemented a jQuery dropdown from this developer's site: http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/, and it looks and works fine on my site in Chrome and Firefox (my site is: http://www.ExpeditionerSafaris.com).
However, in Internet Explorer (of course), the li links do not work.
Here is the code:
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents: function () {
var obj = this;
obj.dd.on('click', function (event) {
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
$(function () {
var dd = new DropDown($('#dd'));
$(document).click(function () {
// all dropdowns
$('.wrapper-dropdown-5').removeClass('active');
});
});
I think you have a problem of jquery confliction refer http://api.jquery.com/jQuery.noConflict/
The code has problems
$(function () {//here is problem of `$` conflictions
var dd = new DropDown($('#dd'));
$(document).click(function () {
// all dropdowns
$('.wrapper-dropdown-5').removeClass('active');
});
});
I checked it and code has error
Error: TypeError: $ is not a function
Source File: http://www.expeditionersafaris.com/
Line: 426
Use jQuery(function () in place of $(function () and then try, or use jQuery.noConflict() function
In your initEvents method. Do not pass event as it collides with IE event, So make it
obj.dd.on('click', function (evt) {
//evt is jQuery normalized event object
$(this).toggleClass('active');
event.stopPropagation();
});
I'm just trying to write some code like this:
var clickAction = function(){
$('#OL_Icon_55').append("<em class='well'>Hello World</em>");
}
$("body").one("mouseenter",clickAction);
And I want to hide Hello World string when mouse hover around #OL_Icon_55, than the code will be look like this :
var clickAction = function(){
$('#OL_Icon_55').append("<em class='well'>Hello World</em>", function() {
$(this).hover(function () {
$(".well").hide();
});
});
}
$("body").one("mouseenter",clickAction);
But that is not working for me. Does anyone have a little more idea or correct that code so that hover function can work?
Have a look at this fiddle.
'Hello World' will be shown if the mouse is inside #OL_Icon_55.
Here's the JS:
var $OL = $('#OL_Icon_55'),
$span = $("<span class='well'>Hello World</span>");
$("body").one("mouseenter", function() {
$OL.append($span);
});
$OL.mouseenter(function () {
$span.show();
}).mouseout(function () {
$span.hide();
});
Stole most the code from #depot. But much shorter
$(function(){ // <-- on dom ready
var $OL = $('#OL_Icon_55'),
$span = $("<span class='well'>Hello World</span>");
$("body").one("mouseenter", function() { // <-- on one mouse enter
$OL.append($span); // <-- append span
});
$OL.hover(function () { // <-- on hover
$span.toggle(); // <-- toggle (show/hide) span
});
});
http://jsfiddle.net/EeGYs/3/