JQuery event not firing to fade out alert box - javascript

This problem is bugging me out a bit. Should be a very simple solution but I can't quite grasp it. What I am doing is creating several nested elements via Jquery and then removing it from the page using JQuery.fade() method.
The close button on the element created does not fire the event but if applied to an independant button, it works.
Javascript:
$( document ).ready(function() {
$("button.create").click(function(){
// action goes here!!
// $(".alertBox").fadeIn();
$('.alerts').append('<div class="alertBox"><span class="hide">X Close</span><p><strong>Alert!</strong> Thank you for submitting your comment. Scroll to the bottom of the page to view it.</p></div>');
return false;
});
$("button.close").click(function(){
// action goes here!!
$(".alertBox").fadeOut();
return false;
});
$(".hide").click(function(){
// action goes here!!
alert("check check");
$(".alertBox").fadeOut();
});
});
HTML:
<h1>Fun with Alert Boxes</h1>
<p>This page is to test the ability to add or remove alert boxes from the DOM. By clicking on the button below, you will make an alert box appear and then you will be able to close the alert box with a button in the top right corner. This will all rely on JQuery to add and remove content from the DOM.<p>
<div class="alerts"></div>
<p> </p>
<button class="create">Create Alert</button>
<button class="close">Destroy Alert</button>
And I have a Fiddle for it http://jsfiddle.net/coolwebs/5n5nosdc/4/ - I have checked it with Console log and can't see any obvious errors. Obviously the issue is that because the function is declared before the element is available on the page, is it possible that that is why it does not work?
Update: Did some testing by generating the script dynamically and it proved my suspicion.

Use Event delegation for dynamically created elements
$('.alerts').on('click', '.hide', function(){
// action goes here!!
alert("check check");
$(".alertBox").fadeOut();
});
For your reference study Event Delegation in SO

Use event delegation for dynamically created events. Also I guess when you click the close button, you want to fadeOut that particular alertBox. Use this code.
$('.alerts').on('click', '.hide', function(){
// action goes here!!
alert("check check");
$(this).closest('.alertBox').fadeOut(); //See this
});
Fiddle

Related

span inside of lightbox won't trigger function

I have added a CodePen Demo
I'm trying to make the lightbox close when the close button is clicked. Currently, the lightbox will only "close" or trigger the close function on the background only.
Not sure what I'm doing wrong.
CodePen Demo
So far I have tried these slectors that don't trigger the closing function:
$('.lightbox-item > .close-button')
$('.lightbox-item .close-button')
$('.close-button')
You should bind the click event on the document using $(document).on('click', '.lightbox-item .close-button', function(){ closeLightbox(); }); because the div lightbox-item is empty when you run $('.lightbot-item .close-button').click(function(){ closeLightbox(); }); at the end of your code.
You can also bind the click event after you append the content in the function openLightbox. It would look like this
$(".lightbox-item").append(content);
$('.lightbox-item .close-button').click(function(){ closeLightbox(); });
I created a fork of your pen using the first solution.

enable the button to be clicked only to once exception?

I use a dialog to get the user input, but I found the user may click double click the button and added the content twice, the cause is the dialog fadeout too slow or the user clicked twice on the mouse.. I don't want to adjust the fadeout speed, instead, how to enable the button only can be clicked once?
jQuery provides the one() method to register a one-shot handler that will only run once.
You can write:
$("#yourButton").one("click", function() {
// Add content...
});
You can disable the button once it was clicked to prevent any further clicks:
$('button').on('click', function() {
$(this).prop('disabled', true);
});
Here is my suggestion. If you are destroying the dialog on exit, just unbind the click event
$('.my-button').on('click', function(){
// process code
$(this).off('click');
});
You can read about off here
And here is a demo. First will not allow other clicks but the second will.
source
Here is a Plunker that shows how you can do this. Pretty much all you need to do is add the following line in your button:
onClick="this.disabled = true;"
So that your button HTML will look something like this:
<button type="submit" onClick="this.disabled = true;">Submit</button>
try this:
$('.myButton').click(function(){
$(this).attr('disabled',true);
....
})
try this with css
$("#yourButton").one("click", function() {
$(this).css('pointer-events', 'none');
})

Click span inside jQuery button

Part of a bigger solution, I have accordion-type jQuery control that implements headers as jQuery toggle buttons. Each header also has to have a help balloon. In nutshell, the setup is similar to that posted at this jsFiddle .
<div id="button1">Go to main action <span id="span1" style="color:blue">Help</span> </div>
<div id="out"/>
$('#button1').button().click(function(){
$('#out').text('Button clicked');
});
$('#span1').click(function(){
$('#out').text('Span clicked');
});
Is that possible to make it so I can click on the Help span, which is located inside the button div? Or, will button always get the events for all of its content preventing inside elements from getting click events?
Thank you.
Your event first fires on span and then also on button. You can prevent the event to be fired on parent by stopPropagation() method. Also, return false do the same.
Fiddle for demonstration
$('#span1').click(function(e){
$('#out').text('Span clicked');
e.stopPropagation();
});
or:
$('#span1').click(function(){
$('#out').text('Span clicked');
return false;
});
jSfiddle http://jsfiddle.net/kxntf/5/

One click - two functions

I'm doing a site for a kiosk, so the site goes like a photoslide in-between each div.
I put a layover/mask on the first page, and the layover/mask is removed on a mouse click function at the moment. (As a side note this is for the purpose of hiding the address bar on the first screen for the kiosk as the first page/div is an a tag)
$("#item1").append('<div id="pageLayover"></div>');
$(document).click(function(){
$("#pageLayover").remove();
});
Everytime you click your mouse to remove the layover then you need to click another time then the first a tag page will slide to the second page.
Is there any way I can have one click only not two to remove layover/mask and to let first page to slide to the second page at the same time?
Here is my code on jsFiddle Any code/links/examples would be great help.
Thanks in advance!
Your question is very confusing, but maybe this is the answer you're looking for:
To make the click on the layover in fact two clicks, you can simply trigger the click event of the first panel:
$('#pageLayover').live('click', function(e) { // <-- updated!
$("#pageLayover").remove(); // remove our layover from the DOM
$panels.eq(0).click(); // <-- trigger click event of 1st element of $panels
});
This does not check if the click occurred on the panel though.
You can solve the problem with the multiple layovers with this:
$('#wrapper').scrollTo($(this).attr('href'), 800,{
onAfter: function(id){
if ($('#pageLayover').length == 0) { // <--- new
$("#item1").append('<div id="pageLayover"></div>');
} // <--- new

jquery add and remove class problem

I'm trying to bind a function with a non-existent class. I will try to explain
my js:
function hidelink()
{
$('#user_form').hide();
$('.selected').text("New User").removeClass('selected').addClass('unselected');
return false;
}
function showlink()
{
$('#user_form').show();
$('.unselected').text("Hide it").removeClass('unselected').addClass('selected');
return false;
}
$(function(){
$('#user_form').hide();
$('.unselected').click(showlink);
$('.selected').click(hidelink);
});
my html:
<div id="user_form">
My Link
</div>
So basically, when you click in the link it will change the classes (selected/unselected) and hide/show a div. The problem is that, when i click once, it shows the form, but if i click again in the link, the form don't hides again. Maybe because i'm biding the events when the page loads and at this time there is not element that match the selector ".selected".. makes sense?
Maybe because i'm biding the events when the page loads and at this time there is not element that match the selector ".selected"..
Yes. Use live().

Categories