jQuery - how to handle clickable elements, that haven't loaded yet - javascript

I have a toolbar that is injected into a template on click. The toolbar also consists of a dropdown, which gets hidden if the user clicks outside the dropdown. To track a click outside the dropdown, I use "$(document).click(function()..." The problem is that the dropdown does not exist on document.ready , what could be improved?
JS
$(document).click(function(){
$('.dropdown').hide();
});
$('.dropdown_name').click(function(){
e.stopPropagation();
$('.dropdown').show();
});

Look for a parent element of the element you want to the click that already exists on the DOM, then use .on on it. Basically what it does is listen for clicks for the descendants, regardless if they're there or not.
$('PARENT_ELEMENT_SELECTOR').on('click','DESCENDANT_SELECTOR',function(e){
//do what you want here
});

You can use the on method on the document like this
$(document).on( "click", ".dropdown_name", function(e) {
e.stopPropagation();
$('.dropdown').show();
});

You could do something like this:
var dropdown = false;
$('.dropdown_name').click(function(){
e.stopPropagation();
$('.dropdown').show();
dropdown = true; // dropdown is now visible
$(document).click(function(){
if(dropdown == true)
$('.dropdown').hide();
dropdown = false; // dropdown is invisible
});
});

Related

jQuery replaceWith() $this

I need to hide "show replies" when I click to show them. Problem is that when I click "show replies" all "show replies" buttons hides. I need to hide only that the one I click. This is the jQuery code:
$(".replies_show").click (function(e){
$(".replies_show").replaceWith(" ");
$(this).next(".replies").show();
e.preventDefault();
});
$(".replies_show") selects all elements having the class, therefore you are selecting all of them and then applying replaceWith to all of them again. However, this inside that call back function refers to the element that just clicked (i.e. the only clicked element not all of them).
Also, do not use replaceWith function just to hide an element, use .hide() instead.
So, replace
$(".replies_show").replaceWith(" ");
With
$(this).hide();
You can use this to get the current element. Otherwise, you're selecting all the elements with the .replies_show class.
$('.replies_show').on('click', function(e, el) {
$(el).replaceWith(' '); // Does what you're looking for
$(el).hide(); // Might be better, depending on what you're doing
$(this).next('.replies').show();
e.preventDefault();
});
Use .hide() function not .replaceWith()
$(".replies_show").click (function(e){
$(this).hide();
$(this).next(".replies").show();
e.preventDefault();
});
As you need target only clicked item, so you need to use $(this) in callback function, something like below:
$(".replies_show").click (function(e){
var $this = $(this); // cache $(this)/clicked element
$this.hide(); // clicked item will be hide (display: none)
$this.next(".replies") // next matched item of clicked item
.show();
e.preventDefault();
});

Hide div with close button jquery only with associated div

This is what I am trying to do, close the notification bar if the x inside it is clicked.
Here is my code: http://jsfiddle.net/spadez/qK3yK/2/
$('#closeButton').on('click', function(e) {
$('#previewBox').remove();
});
How can I make it so it only closes the warning with which it is associated with, instead of removing all of them though. I'm sure the word "this" is needed in the code, but I can't understand where.
Use jquery .parent() to get the parent of each element in the current set of matched elements, optionally filtered by a selector. Try this:
$('#close').on('click', function(e) {
$(this).parent('.alert').remove();
});
DEMO
$("#closeButton").on('click', function() {
$(this).parent().remove();
});
this will remove prev elemement.
Try this. You have to get it is parent not that element itself
$('#closeButton').on('click', function(e) {
$(this).parent('.alert').remove();
});
Or
$('#closeButton').on('click', function(e) {
$(this).parent().remove();
});
This will remove closest parent
What i assume is that you are trying to remove the parent of the 'x'.
On clicking on x . The parent div should be removed.
Make these changes in your JS file
$('#closeButton').on('click', function(e) {
var par = $(e.target).parent();
$('par').remove();
});

Click event when not clicking on an element

Maybe I'm, just tired but I have a right click menu that I want to close when the user clicks anywhere else than the menu. But I cant figure out how to make it disappear when the user clicks on something else.
Here is the code for showing the menu:
// If mouse click on was pressed
$('#content_list table tr').bind('mouseup', function(event) {
// if right click
if(event.which == 3) {
showRightClickMenu(event);
}
event.preventDefault();
event.stopPropagation();
});
And this is what I got for hiding the menu
// If mouse click outside document
$(document).bind('blur', function(event) {
hideRightClickMenu();
event.stopPropagation();
});
// If mouse click not on the menu
$('*:not(#rightClickMenu *)').bind('mousedown keydown', function(event) {
hideRightClickMenu();
event.stopPropagation();
});
The first bind checks if the user clicks outside the document and the second bind checks if the user clicks on everything except the menu.
But the second one doesn't really work. If I click on the menu the menu is hidden.
Shouldn't be so hard imo... Anyone got any ideas?
Try it this way
$(document.body).bind('click', function() {
hideRightClickMenu();
});
$(window).bind('blur', function() {
hideRightClickMenu();
});
Try with focusout() event and using on() instead of old bind(). This will work even with multiple submenus.
http://jsfiddle.net/elclanrs/jhaF3/1/
// Something like this...
$('#menu li').on('click', function() {
$(this).find('ul').show();
}).find('ul').on('focusout', function(){
$(this).hide();
});

Handle Conflicts Between Document Click and Element Click

So I have a dropdown, which I hide and show based on an element click. However, I also want to hide this dropdown whenever it is visible if I click anywhere else in the document.
This is the dropdown code:
function dropdown(){
$('#smenubutton').click(function(e){
var submenu = $(this).find('.submenu');
if (submenu.is(':visible')){
submenu.hide();
}else{
submenu.show();
}
});
}
however, a code like this:
$(document).click(function(e){
e.stopPropagation();
$('.submenu').hide();
});
will obviously always hide the submenu. both are loaded in document load. I know I am just missing something so simple. Feel free to point me to a duplicate(I have tried searching but can't find any questions based on my needs) and close this question.
You should check if e.target is the submenu and hide the submenu only if it's not (in this case i check if it has the class submenu)
$(document).click(function(e){
if($(e.target).hasClass("submenu")){
$('.submenu').hide();
}
});
Since you mentioned "outside the browser", try this: http://www.thefutureoftheweb.com/blog/detect-browser-window-focus
EDIT: Since OP edited the question, I'll edit the answer:
$(document).on('click', '#submenu', function(e) {
e.stopPropagation();
// show or hide the submenu here
});
$(document).on('click', function(e) {
// hide submenu here
});
example: http://jsfiddle.net/A3SfP/
Try on blur() or focusout():
$('#smenubutton').blur(function(){ submenu.hide(); });
// OR
$('#smenubutton').focusout(function(){ submenu.hide(); });
If it doesn't work try giving your menu an explicit tabindex.

How to hide a table when it blur/or click document that outside the table

How to hide a table when it blur/or click document that outside the table
If you're asking how to hide the table when the user clicks elsewhere in the document (your wording is a little off), then may I suggest the clickoutside special event from Ben Alman?
Usage:
$('table').bind("clickoutside", function(event){
$(this).hide();
});
Or, if that seems a bit OTT, then try this (no plugins required):
var myTable = $('table');
$(document).click(function(e) {
if (e.target !== myTable[0] && !$.contains(myTable[0], e.target)) {
myTable.hide();
}
});
You can use event bubbling to your advantage here, like this:
$("#tableID").click(function(e) {
e.stopPropagation();
});
$(document).click(function() {
$("#tableID").hide();
});
With event.stopPropagation() we stop the bubble from reaching document when it comes from within the table. When it comes from elsewhere it (by default) gets to document, hiding the table. In "by default", I mean you haven't done areturn false or .stopPropagation() on those click events.
Table have not blur, but elements inner table have:
$('#yourtableid:visible a').each(function(){
$(this).bind('blur', function(){
$('#yourtableid:visible').hide();
});
});
$(document).bind('click', function(){
$('#yourtableid:visible').hide();
});
This is jast idea, not solution

Categories