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
Related
I try to trigger an event on user click, then I used the on click method of JQuery. The problem is that I create my element after my onclick function.
I've read here or here that we can add a balise name between click and the function but my code return n.apply is not a function
Here is my JQuery method:
d3.selectAll("body")
.on('click', '.child', function(){
console.log("here");}
and later on,this code return the good elements :
console.log(d3.selectAll("body .child"));
Try this : use $(document) as parent element to delegate click event calls
$(document).on('click', '.child', function(){
console.log("here");
});
You can add a handler while you creating an element. Just create a jQuery OBject and append this to whatever you need. Note: The Click function can also be inline.
Example: https://jsfiddle.net/rfccvgLm/
it seems - as far as the syntax is ok - that the handlers are not registered, because d3.selectAll does not return no elements to register the event on
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.
I am trying to bind a click event to all the element on a page except to those inside an element with an id
$('body :not(#dialog-form *)').off('click').on('click', function (e)
{
//code
});
The above mentioned code binds the click event to those elements inside 'dialog-form'.
Your code is working but you missunderstand what happen. You see, you bind a click on everything except some elements, but #dialog-form * is inside body which mean that even if #dialog-form * has no event, a click on it will proc a click on body (which contain an event). You need to prevent the bubbling:
$('body').off('click').on('click', function (e){
//code
});
$('#dialog-form').on('click', function(e){
e.stopPropagation();
})
Fiddle : http://jsfiddle.net/d4gLd/
I've got a bunch divs which each contain a remove link attached with the click event below:
var observeRemoveRoom = function
$('.remove_room').click(function(){
$(this).parent().removeClass('active');
});
}
Clicking it removes the 'active' class of the parent (the div). I call this observeRemoveRoom function on window load which works fine.
The thing is, I have another function which adds more of the same divs. Since the a.remove_room links contained within the new divs weren't around on window.load I need to call observeRemoveRoom.
Am I somehow duplicating the event handlers? Does jQuery overwrite them? If so should I unbind the handlers?
Each time you call observeRemoveRoom jQuery will add a new unique event handler function for a click event.
So yes, you need to .unbind() either all currently bound handlers by just calling .unbind() without arguments, or be specific and pass in a function reference.
You can try a live query to keep them updated: http://docs.jquery.com/Plugins/livequery
Yes, you will be duplicating the event-handlers if you call observeRemoveRoom again, but it might not be noticeable since you are only calling the removeClass method which does nothing if the class is not found, which would be the case after the first listener is triggered.
Instead you can un-bind and re-bind the click event each time, like:
var observeRemoveRoom = function(){
var remove_class = function(){
$(this).parent().removeClass('active');
};
$('.remove_room').off('click', remove_class).on('click', remove_class);
}
But that said, it is recommended that you do this outside this function`, rather than binding and unbinding the event every time, like:
$(document).ready(function(){
var remove_class = function(){
$(this).parent().removeClass('active');
};
// If the element exists at dom ready, you can bind the event directly
$('.remove_room').on("click", remove_class);
// If the element is added in dynamically, you can [delegate][1] the event
$('body').on("click", '.remove_room', remove_class);
// Note: Although I've delegated the event to the body tag in this case
// I recommend that you use the closest available parent instead
});
http://api.jquery.com/on/#direct-and-delegated-events : [1]
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