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.
Related
$('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
I'm trying to select an element based on its class (using $(".class")) and I'm having an issue, and I'm not sure why it's happening.
First off, the element is an image. It gets created when a function is executed by:
$("#container").append("<img class='removeIcon' src='images/remove.png' remove='"+$(this).val()+"' />");
This works as it should. The image is added when the function is fired, even multiple times. And the value of each is what it's meant to be, it's all good. The element is fine.
What isn't working...
$(".removeIcon").click(function() {
alert();
console.log("Clicked!");
});
I'm not sure if it's not working because the image is added later, or maybe I'm doing something wrong? But I whenever I click any of the images with that class, there's no alert dialog, and no console log.
I've typed, into console, $(".removeIcon"); - and it shows all of the images with that class, so I don't understand what's wrong. Can you not have a click even on a class selector?
Thanks in advance!
your code only works for existing .removeIcon elements.
if you do add dynamic elements, try use .on
$("#container").on('click', '.removeIcon', function() {
alert();
console.log("Clicked!");
});
which binds click event on all .removeIcon elements inside #container
(including dynamic added elements)
Yes, the problem is that it is being added later, so you have to delegate with:
$("#container").on('click', '.removeIcon', function() {
alert();
console.log("Clicked!");
});
So, the event will be asigned to the container but will act on .removeIcon items.
For more info check jQuery's on function.
click() function doesn't work with dynamically loaded data.
You have to capture click event by DOM or by making onclick function
by DOM
$("#container").on('click', '.removeIcon', function() {
console.log("click");
});
OR onclick function
$("#container").append("<img class='removeIcon' onclick="somefunctionInJS()" src='images/remove.png' remove='"+$(this).val()+"' />");
I want to make an event listener that triggers some code when a certain element is clicked, and one that toggles some code if anything but that element is clicked. So far, all I've come up with is making two handlers, one for the body and one for the element, and slightly delaying the code with setTimeout() to avoid the two handlers conflicting. It looks very ugly and, well, not right. Is there a better way to do what I need here? Or, is there an "all-but-this-element" handler I can use? I have been doing this with jQuery, so answers dependent on the library are welcome and preferred.
Maybe you want something like this (if I understood the question)
HTML:
<button id="btn">Click</button>
JS:
$('body').on('click', function(e){
if(e.target.nodeName=='BODY')
{
// clickd on body
}
else if($(e.target).attr('id')=='btn')
{
// clickd on button
}
});
Example.
If you want to bind the click to all elements not to an element with id "div1", you can use like:
$('body').on('click', ':not(#div1)', function(){
});
Basically I have a popup and want to hide it when it is clicked anywhere outside, but one element (which is another popup, let say div#AnotherPopup). Then I click on #AnotherPopup, it should not hide the original one.. It does now, because I have this:
$(document).bind('click', methods.hide);
How to bind it to document, except #AnotherPopup ? :)
You can't really but you can check inside methods.hide if the target element is #AnotherPopup and immediately return out of the function before doing anything.
The click handler for #AnotherPopup is to stop document from getting a click event.
$(document).bind("click", function () {
alert(this.innerHTML)
});
$('#AnotherPopup').click(function () {return false;});
Example
By using unbind you can do this:
$(document).bind('click',methods.hide);
$('#AnotherPopup').unbind('click',methods.hide);
Read more about unbind here
I'm having a problem. Basically, when a user clicks an 'Edit' link on a page, the following Jquery code runs:
$("#saveBtn").click(function () {
saveQuestion(id);
});
By doing this, the onClick event of the save button calls the saveQuestion() method and passes on the ID of the question for which the 'Edit' link was clicked.
But if in the same session the user clicks edit on 2 questions, then instead of overwriting the previous click event handler, it instead causes 2 event handlers to run, one which might call saveQuestion(1) and the other might call saveQuestion(2). By doing this 1 question overwrites the other.
Is there a way to remove all previous click events that have been assigned to a button?
You would use off() to remove an event like so:
$("#saveBtn").off("click");
but this will remove all click events bound to this element. If the function with SaveQuestion is the only event bound then the above will do it. If not do the following:
$("#saveBtn").off("click").click(function() { saveQuestion(id); });
Is there a way to remove all previous click events that have been assigned to a button?
$('#saveBtn').unbind('click').click(function(){saveQuestion(id)});
$('#saveBtn').off('click').click(function(){saveQuestion(id)});
If you used...
$(function(){
function myFunc() {
// ... do something ...
};
$('#saveBtn').click(myFunc);
});
... then it will be easier to unbind later.
$('#saveBtn').off('click').on('click',function(){
saveQuestion(id)
});
Use jquery's off and on