I wrote the code in javascript (jQuery), that allows a user with every click of a button to create a "box" on the web site and to get an alert message after this box was clicked.
It works like this:
1) When the user presses the button "Add (#addBox)" - jQuery appends a new line to the HTML file, that creates the "box" (it looks like a box because of the CSS code).
2) If the user presses the box, it sends out the alert message "Hello".
But if I add multiple boxes and then click on the first one, instead of sending out one alert message, it sends it out as many time as the number of boxes been created.
Example:
1) I have 1 box. By pressing on it, I receive 1 alert message.
2) I have 2 boxes. By pressing on the top one, I receive 2 alert messages.
By pressing on the second one, I receive 1 message.
3) I have 3 boxes. By pressing on the top one, I receive 3 alert messages.
By pressing on the second one, I receive 2 messages.
By pressing on the third one, I receive 1 message.
The function of sending an alert message is looping for some reason.
And so here is the code:
function addBox()
{
$("#addBox").on("click", function () {
$("#addBox").append('<div class="desiredBox">Say Hello</div>');
}
boxCount();
});
}
function boxCount()
{
$(".desiredBox").on("click", function () {
alert("Hello");
});
}
Any ideas, how to make them send only one message each, preventing the function "boxCount()" from looping?
Every time the function boxCount is invoked an event handler is added to existing elements i.e. ".desiredBox". thus you are getting multiple alerts.
As you are creating elements dynamically.
You need to use Event Delegation. You have to use .on() using delegated-events approach.
General Syntax
$(document).on(event, selector, eventHandler);
Ideally you should replace document with closest static container.
Complete code
$("#addBox").on("click", function () {
$("#addBox").append('<div class="desiredBox">Say Hello</div>');
});
$(document).on('click', '.desiredBox', function(){
//Your code
});
Use event delegation so you don't keep adding the click event to .desiredBox over and over again:
$(document).on("click", "#addBox", function () {
$("#addBox").append('<div class="desiredBox">Say Hello</div>');
$(".desiredBox").trigger("click");
});
$(document).on("click", ".desiredBox", function () {
alert("Hello");
});
Related
I have the following function, if I use the alert dialog the Click section (1) is reached. if I remove the alert dialog the page is posted and the Click section (1) is never reacted. How can I i solve it?
$("#txtInput").change(function () {
alert('...');
$("#btn.ClientID").click(); // Click (1)
});
If you want the change event to call JavaScript function before posting back to the server. Then pass an event object into the function and then use preventDefault(). This stops the default behaviour.
$("#txtInput").change(function (e) {
e.preventDefault();
$("#btn.ClientID").click(); // Click (1) - It's unlikely "btn.ClientID" is the correct name of your button
});
I've got slider in template glitching, and code is minimized. So, got tired of looking for the cause of the problem and decided to use a quick hack.
I need to fire a div click multiple times.
I've used this piece of code to trigger a click
$('.control-prev').trigger('click');
Works fine for one time click.
Now, how do i make it click multiple times?
http://jsfiddle.net/br4Lmyso/ (warning: creates three alerts, just to quickly show it works)
// set your count to whatever you want. Get a reference to the div
// so you're not querying the DOM everytime.
var triggerCount = 3;
var triggerDiv = $('.control-prev');
// loop!
for(var i = 0; i < triggerCount; i++) {
triggerDiv.trigger('click');
}
To be clear, trigger(...) does not simulate the click behavior and there is no way you can simulate the click behavior. What it does is to call the function that handle given event. These two are total different. For example:
$('#test').click(function() {
console.log("Clicked");
});
$('#test').dblclick(function() {
console.log("Double Click");
});
$('#test').trigger('click');
$('#test').trigger('click');
Despite of rapidly trigger two clicks, the double click will not trigger.
I am trying to restrict the user from clicking on a button multiple times. They can click on the button once when the page loads. If the page is reloaded the same should apply the user can click on the button only once.
I am using the following code however it doesn't seem to work for me
$("#doAccess").click(function() {
$("#doAccess").removeAttr('onclick');
DoSave();
});
Disable the button after it's been clicked
var accessBtn = $('#doAccess');
accessBtn.click(function() {
accessBtn[0].disabled = true;
DoSave();
});
Sounds like what you really need is:
$("#doAccess").one('click', DoSave);
jsFiddle example
.one() - Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
Why not this?
$("#doAccess").once('click', function() {
DoSave();
});
You should probably also gray out or disable #doAccess, whatever it is.
I'm working on my first program using jQuery, but I'm having an issue. I have a dialog pop up on pageLoad that asks the user to select a date and a turn. Right now, for debugging purposes, I have it alert every time .click() executes, and for some reason, it seems like it executes before the user clicks and immediately afterward.
There are three radio buttons, Turns 1, 2, and 3. When the user clicks Turn 1, the alert should say "1". When the user clicks Turn 2, the alert should say "2", etc. But for some reason, it alerts the previous value as well as the new one. I searched all of my code, and there is only one alert, so I can't figure out what is calling click() twice. I've tested it in IE and Chrome and it happened both times.
This is my .click() function:
$("#turn-radio")
.click(function () {
turnvalue = $("input[name='turn-radio']:checked").val();
alert(turnvalue);
});
If you check this jsfiddle, you'll see the rest of my code, which will hopefully make it easier to figure out what my problem is.
Thanks!
You need to change selector: as your radio button IDs are different and you were giving name as a selector that's why you were facing that problem:
$("input[name='turn-radio']")
.click(function () {
turnvalue = $("input[name='turn-radio']:checked").val();
alert(turnvalue);
});
Updated Fiddle
changing
$("#turn-radio") to $("#turn-radio label")
causes only one popup displaying the previous value
But, personally i would
$("#turn-radio input").change( function() { /* do stuff */ } )
I've got a div that starts out as hidden, and shows up when a button is clicked. There is another button on the div, and the onclick event calls this function:
function popuppage2OK() {
alert("you clicked ok!");
var x = new Object();
x.name = $("#boxforname").val(); //this is a text input
x.option = $("#boxforoption").val();//this is a text input
alert("hiding newfactorpage2");
$("#popupform").hide(); //this is a div containing the text inputs and the button with the onlcick event that calls this function
alert("popupform hidden");
displaystuff(); //another function ive written that needs to be called
alert("this is after the display attempt");
}
My probelm is that the only line that seems to execute is the line to hide the div. None of the alert boxes appear, and the displaystuff() function doesn't get executed, but the div does go back to being hidden. Any thoughts on why lines of code might get skipped like that?
When do you attach the eventhandler to the button inside the div ?
You should do it after the page has done loading, so in Jquery you can do something like:
$(document).ready(function () {
//attach the eventhandler here
})
Usually this kind of behavior happens when you've got an error in your javascript. Check to ensure that all of your selectors are valid and that there aren't any errors elsewhere.