prepend images on click - prepend just once then stop - javascript

$('button').click(function() {
$('.img-container').prepend('<img src="images/image.jpg">')
});
I have a one page design and a gallery section that becomes visible on click.
I do this by prepending the imgs. Here you can see how I add 1 image. The issue is that the more you click the more elements it creates.
Is there any way to make it create the element just once? Then somehow stop prepending.

If you handler is as simple as given then you can use .one() to register the handler so that the event handler will get executed only once
$('button').one('click', function() {
$('.img-container').prepend('<img src="images/image.jpg">')
});
Demo: Fiddle
Another option is to check whether an image exists
$('.img-container').not(':has(.someimage)').prepend('<img class="someimage" src="images/image.jpg">')
Demo: Fiddle

Related

Calling IDs and Classes inside a Javascript String

I have this jQuery code. What it does is when you click a div button (#logogo), it shows a resized image in the stage.
$(document).ready(function(){
$("#logogo").click(function(){
$(this).addClass("active");
$("#bannergo").removeClass("active");
$("#innerstage").html("<img id=\"magiclogogo\" src=\""+document.getElementById("logogo").title+"\">").hide().fadeIn('fast');
});
});
What I want to happen next is that when you click on the image (hence the magiclogogo id), it would be able to show (or to load) the image in its original size.
So far I tried putting an id and tried to make a jquery function for it but it does not work.
If it's not possible, is there any probable way to be able to zoom the image to its original size?
$(document).on("click", "#magiclogogo", function(){
// your code here
});
So, what I'm guessing is that somwhere else you have something like:
$('#magiclogogo').on('click', function() {
//More code here...
}
If the dom element isn't loaded yet, then it will not attach the event correctly. In other words, the event must be attached once the DOM element has been loaded or attach the event to the parent and look out for the source of the event (jquery has a shorthand for this, which is the other answer).
You can use the jQuery constructor to create the element and then attach the event.
var image = $("<img id=\"magiclogogo\" src=\""+document.getElementById("logogo").title+"\">");
image.on('click', function(){
//Your code here
});
You then can add it to your container with append.
$('#innerstage').append(image);

How to create click event handler inside mouseover event handler?

I'm trying to build some kind of element inspector (like in Chrome/FF).
Flow is as follows:
You click 'Start inspecting' button.
You hover over necessary element.
You click on that element.
You should see that element in console.
JSFiddle example
Here is the code:
startInspecting = function(){
$('section *').on('mouseover.INSPECTOR', function(e){
$('.hovered-element').removeClass('hovered-element');
$(e.target).addClass('hovered-element');
$(this).on('click.INSPECTOR', function(e){
$('section *').off('mouseover.INSPECTOR');
$('section *').off('click.INSPECTOR');
$('.hovered-element').removeClass("hovered-element");
console.log(e.target);
});
});
};
The problem is: each time I hover over some element - click event handler is attached to it. So if I hover over p element 5 times, and then click on it - I will see 5 console.logs instead of 1.
I tried to implement it using mouseenter/mouseleave, but faced the issue, that each element can be hovered only once - another JSFiddle example
So how can I improve my code that no matter how many times I hover over the element, it will have only one click handler?
Thanks in advance, any help will be appreciated!
Did you try moving the onclick handler outside the mouseover?
startInspecting = function(){
$('section *').on('mouseover.INSPECTOR', function(e){
$('.hovered-element').removeClass('hovered-element');
$(e.target).addClass('hovered-element');
}).on('click.INSPECTOR', function (e) {
$('section *').off('mouseover.INSPECTOR click.INSPECTOR');
console.log(e.target);
});
};
DEMO
I'd suggest breaking it up into parts. The user clicks on "Start Inspecting" and your page goes into inspecting mode where it adds css dynamically to every element that is hovered over so it looks similar to Chrome. When you click on an element in inspecting mode then you can handle it how you want. This way you only have to add one hover and one click handler per element, thus only triggering the event once.

Chain a div click to another with jquery?

Not sure if I'm using the correct lingo,
But I want to click a div and when I do it should cause another to be clicked after.
Ex click div 1 then div 2 gets clicked (but not by user, just by JS)
Is this possible?
There is already a huge function attached to div 2 when clicked, so I need to to link the two if that makes sense. Easier hopefully than sorting through lots of code and trying to add it in.
Any help?
you can use:
$('#div1').click(function(){
$('#div2').trigger('click');
})
You can just call click() on div 2:
$('#div1').click(function(){
//your code
$('#div2').click();
});
$("#div1").click(function() {
// Do stuff...
// Then click the other DIV
$("#div2").click();
}
It is possible, in the click handler for div one call
$("#div2").click();
Yes this is possible creating the function for the click on the 1.
With
$('#iddiv1').click(function(){
//your code
$('#iddiv2').click();
});
Documentation
Yes you can by doing so:
$("#idDiv1").click(function(){
//do what you want
$("#idDiv2").trigger("click");
}
You need to have an onclick event TRIGGER a click on another div.
$('#foo').click(function() {
$('#bar').trigger("click");
});
$('#bar').click(function() {
// Do something
});
$('#div1').click(function() {
$('#div2').click();
});
Edit:
This solves your problem because it attaches a listener to div1 and executes a function whenever div1 is clicked. It just so happens that you want to emit another event for div1, which, in jQuery shorthand, is written with the .click() function.
Giving .click() a function as a parameter sets the callback for the click event, which can manually be called by calling the function without any parameters.

Bootstrap - Icon toggle with jquery

I got a little problem trying to toggle an icon of Bootstrap. When i run code it does what expected the first time you click on the icon it toggle's, but when i click again it doesn't change. Here its my code and any help will be appreciated!
<a><i class="icon-plus"></i></a>
<script>
$(".icon-minus").click(function(){
$(this).removeClass("icon-minus").addClass("icon-plus");
});
$(".icon-plus").click(function(){
$(this).removeClass("icon-plus").addClass("icon-minus");
});
</script>
Update 1:
This icon is for a collapsible menu and the code of that can be found here :)
jsBin demo
$(".icon-minus, .icon-plus").click(function(){
$(this).toggleClass("icon-minus icon-plus");
});
Or this if you dynamically create your elements:
$("#parent_el_NOT_dyn_gen").on('click','.icon-minus, .icon-plus',function(){
$(this).toggleClass("icon-minus icon-plus");
});
The jQuery's selector selects DOM elements then applys the click handler to them. It's not re-evaluating the selector after you change the classes on the element.
You probably want the delegate() / on() method from jQuery to dynamically change the the handler that's fired when the item is clicked. Delegate works with event bubbling and will handle the click and evaluate if the source of the click matches the selector (at the time of the click) as opposed to the .click() which attaches the handler directly, once (at the time of page-load or whenever the code was ran).
Another solution is to change the handler somehow, either by evaluating what class is on the existing element or using toggleClass() which will check for a class then invert it.
$(".icon-minus, .icon-plus").click(function() {
var $this = $(this);
if ($this.hasClass("icon-plus")) {
$this.removeClass("icon-plus").addClass("icon-minus");
return;
}
if ($this.hasClass("icon-minus")) {
$this.removeClass("icon-minus").addClass("icon-plus");
return;
}
});
This method will be slightly faster than using on() / delegate() because it's handled at the root handler and not bubbled & checked afterwards. It's also not susceptible to any breaks in the event bubbling. (ie. event.stopPropagation())
Simple solution worked for Bootstrap 3.
$('[data-toggle="collapse"]').click(function(e) {
$(e.target).find('.icon-minus-sign, .icon-plus-sign').toggleClass("icon-minus-sign icon-plus-sign");
});

jQuery .not() isn't filtering elements from function - Ideas?

I'm trying to create a function that disables voting button after an Ajax POST success. The voting buttons are enabled until POST completes, and then are fixed with 'disabled' styling and are in-clickable. I'm trying to use jQuery .not() to disable starting the function from clicked buttons (with the class 'disabled') but I'm not having much luck. Here's a fiddle of my function so you can see my problem, I'm not sure what I'm missing but I'm hoping someone can help me find my error, it's frustrating me : )
jQuery Code:
$("a.votebutton").not(".disabled").each(function(index) {
var el = $(this);
$(this).click(function() {
el.addClass("active disabled").unbind("click");
el.siblings().addClass("disabled");
});
});
​
The problem is that your code:
$("a.votebutton").not(".disabled")
selects all of the links that are not disabled at the time that line of code runs, and then you loop through assigning click handlers. These click handlers remain bound to those links even if they happen to be given the "disabled" class at a later time - so when you add the "disabled" class to the clicked element's siblings those siblings still have a working click handler. If you unbind the click from the siblings that should fix it:
// change
el.siblings().addClass("disabled");
// to be
el.siblings().addClass("disabled").unbind("click");
Note that you don't need the .each():
$("a.votebutton").not(".disabled").click(function() {
$(this).addClass("active disabled").unbind("click")
.siblings().addClass("disabled").unbind("click");
});
Another way to do it would be to use delegated event handling:
$("div.panel").on("click", "a.votebutton:not(.disabled)", function() {
$(this).addClass("active disabled")
.siblings().addClass("disabled");
});
That way the clicks are only handled once they bubble up to the containing div ("div.panel"), at which time your click handler is only run if the event's source element matches the selector that is the second parameter to .on().
Updated demo: http://jsfiddle.net/RSezp/2/

Categories

Resources