When I'm loading some content through ajax it returns an jQuery .click event and some elements. But when the ajax content is loaded a couple of times and I click the the button that is bound to the .click event, the action is executed a couple of times.
For example the ajax content is:
<script type="text/javascript">
$('#click').click(function() { alert('test') });
</script>
<input type="button" id="click" value="click here">
If this is refreshed 5 times and I click the button I will get 5 alert boxes.
Is there a workaround for this?
You can use the unbind function just before the click, something like this:
$('#click').unbind('click').click(function() { alert('test') });
That should let only one function associated with the click
The JQuery one method unbinds the handler after it is invoked:
$('#click').one("click",function() { alert('test') });
More info:
http://docs.jquery.com/Events/one
Related
I have an problem with Jquery event. Jquery Event was call multiple time after I replace that element with another element but same type and same id.
// 1. ajax call success and replace my block
// 2. This is my event that I want it happen.
$(document).on("click", ".polaroid button.addImage", function(event) {
event.preventDefault();
// trigger browse file to upload
$(event.target).closest("div.polaroid").find("input[type=file]").trigger("click");
});
This code was used to resold event was call after AJAX success. So, why is button.addImage with event click called many times at the same time AJAX is called?
This is html:
<div class="col-md-3 polaroid">
<img src="images/ingredient/default_img.png" title="Main image" />
<input type="file" name="file-image" style="display:none"/>
<button type="button" data-toggle="tooltip" title="Add" class="btn addImage"><i class="glyphicon glyphicon-plus icon-plus"></i></button>
</div>
You most likely are loading this script again or calling a function that adds this event handler again
The best fix is to find where this event handler is being called again.
A workaround would be to namespace the event and always remove the event handler using off() before adding it again
$(document)
.off('click.polaroid')
.on("click.polaroid", ".polaroid button.addImage", function(event) {
// other code
});
use one()
$(document).one("click", ".polaroid button.addImage", function(event) {
Thanks. I found answer. that is use "off" before "on", like this:
I update the answer of Mr.charlietfl.
$(document)
.off('click',".polaroid button.addImage")
.on("click", ".polaroid button.addImage", function(event) {
event.PreventDefault();
// other code
});
I'm working with a wordpress theme and I need to activate a button when the page loads, but none of the following has worked for me (my button has the ID "reset"):
$(document).ready(function() {
$("#reset")[0].click();
});
--
$(document).ready(function(){
$("#reset").click();
})
--
$(window).load(function(){
$('#reset').click();
});
I put the code in the header or in the page where i need to activate the button, but does not work.
Thanks!
I give you example here
$(document).ready(function(){
$("#reset").click();
})
the code above should work.
JavaScript does not allow seamless programmatic triggering of an actual click event.
What you could do is
declare the click callback as a separate, named function
e.g.
function myClickCallback(e) {
// Do stuff here
}
Set this as the click callback of your button (e.g. $('#reset').on('click', myClickCallback)).
Invoke the callback when the page loads (e.g. $(document).ready(myClickCallback);)
I am not sure why you 'd want this functionality, since it sounds weird. From reading your description, by "activating", you could also mean enabling the button. To do that you should do something like the following
$(document).on('ready', function (e){
$('#reset').removeAttr('disabled');
});
You may need to refer to it using jQuery instead of $:
The jQuery library included with WordPress is set to the noConflict() mode...
https://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers
$(document).ready(function(){
$("#reset").trigger('click');
});
Use the function Trigger with the event click
$(document).ready(function(){
$("#reset").trigger('click');
});
This what works for me:
$(function () {
$('#btnUpdatePosition').click();
});
On the button event, the JQuery binding event doesn't work:
$('#btnUpdatePosition').click(function () {
alert('test again');
});
But it works when I added the event on attribute declaration:
<input type="button" value="Update" id="btnUpdatePosition" onclick="alert('Click has been called')" />
You can also call if you have a function on element:
<input type="button" value="Update" id="btnUpdatePosition" onclick="fncShow();" />
I try make button with jQuery I call the JavaScript function, but I got problem :
after page loaded, first time click on mybutton there is no reaction
second click will execute function twice
third click will execute function three
and more
Why my code execute many more ? I just want " 1 click 1 execution JavaScript function"
my code like this
<script type="text/javascript" language="javascript">
function showcase(){
var foo = function () {
alert('tutup');
};
$('#create-new').on('click',foo);
return false;
}</script> <button class="button" id="create-new"onclick="return showcase();">show text</button>
please help me out this problem
for try my full error code at here http://jsbin.com/ovucer/1/edit
You are registering multiple click event listeners to the element
Every time you click on the button you are adding a new click handler to the button using showcase method, it is not needed
<button class="button" id="create-new">show text</button>
<script type="text/javascript" language="javascript">
var foo = function () {
alert('tutup');
};
$('#create-new').on('click',foo);
</script>
This happens because you bind a click event, which calls showcase() function, which as well binds a new click event, that calls foo() method. And the last iteration is repeated every time you click the button. This is sort of recursion working here.
The right way will be to bind a click event a single time, after the element is loaded:
<button class="button" id="create-new">show text</button>
<script type="text/javascript">
$("#create-new").on("click", function() {
alert("tutup");
});
</script>
You are registering an onclick function in onclick,
use this:
$('#create-new').on('click', function(){ alert('text button'); return false; });
You're binding the click event twice. Using onclick on the HTML and over again, using jQuery .on().
To make your life easier, and as you're using jQuery already, do it just at the document ready event:
var foo = function () {
alert('text button');
return false;
};
$(function () {
$('#create-new').on('click',foo);
});
And fix your HTML bit, by removing the onclick:
<button class="button" id="create-new">show text</button>
try this in your script tag and delete the onclick event in the button:
var foo = function () {
alert('tutup');
};
$('#create-new').on('click',foo);
return false;
I've a question about ajax submitting.
I have a html form
<div style="display:none">
<form id="myform" method="post" action="">
<input type="text" id="name" />
<input type="submit" id="sbmt" />
</form>
</div>
And button to open the fancybox:
<a id="sbtfancybox" href="#myform">
<input type="button" value="Add new"
onClick="defineFancybox();" />
</a>
And i define a fancybox with jquery:
<script type="text/javascript">
function defineFancybox() {
$('#sbtfancybox').fancybox({
//...some json parameters
});
$('#myform').submit(function() {//the main problem is here
//....calling an ajax
return false;
});
}
</script>
My question is that how to do $('#myform').submit(..) that the submit always is called once, not that if i open fancybox the first time, the $('#myform').submit() is called once, if i open the fancybox the second time, the $('#myform').submit() is called twice, if i open the fancybox the third time then $('#myform').submit() is called tree times etc.
Thank you
jQuery event handlers don't override each other, even in the case where you're binding the same function again. Every time you call this code:
$('#myform').submit(function() {//the main problem is here
//....calling an ajax
return false;
});
another event handler gets added. Since that code is in the function that is called when you click on your button, the first click results in one event handler. The second click adds another one, so you now have two. The third click adds another, so you have three...
Since the form doesn't appear to be dynamically created you can just bind the single event handler when the page loads:
$(document).ready(function() {
$('#myform').submit(function() {
//....calling an ajax
return false;
});
});
Then move it out of the defineFancybox() function.
If you absolutely have to keep the event handler binding inside that function, then you can use the .off() (or .unbind() if you're using a version prior to 1.7) function to remove any existing event handlers before binding the new one:
$('#myform').off('submit').submit(function() {
//....calling an ajax
return false;
});
Have you tried with .one() handler:
$('#myform').one('submit', function() {//This will make it submitted once
//....calling an ajax
return false;
});
You can do something like
$('#myform').unbind('submit');
$('#myform').bind('submit',function() {//the main problem is here
//....calling an ajax
return false;
});
You may try the following
$("#myform").each(function(i) {
var handler = i.on("submit", function() {
handler.stop();
// do stuff
});
// other stuff
});
I am using this code:
onclick="$('#default').click();" ... is there any way to return an alert of something if it's done sucessfully?
Update:
There seems to be a proble here:
onclick="$('#default').click( function() { alert('clicked'); });"
That syntax is a bit off. Usually you'd use jQuery's click() like this:
HTML:
<a id="something">Text</a>
JavaScript:
$('#something').click( function() { alert('clicked'); });
Update:
Even your updated code seems to work, but it is very bad code like that - you might have some error somewhere else in your javascript, or in the DOM structure. See http://jsfiddle.net/HCQeN/1/
It would be much better to seperate the jquery from the onclick, like: http://jsfiddle.net/ctUgp/
Lets say your example is:
<input type="button" id="myButton" onClick="$('#default').click()" />
What you want is:
<input type="button" id="myButton" />
<script type="text/javascript">
$(document).ready(function(){
// this code will run when the document has loaded
// and all elements are in place
$("#myButton").click(function(){
// this code will be run when the user clicks on
// the button we created above
$('#default').click(); // this calls the click event on #default
alert('Finished'); // now it is finished
}); // close the click handler on #myButton
$('#default').click(function(){
// this code will be run when the user click on
// the element with id "default" OR (in this case)
// when the click event is triggered from clicking the
// button above.
alert('#default was clicked');
}); // close the click handler on #default
}); // close the document.ready code block.
</script>
just like this
$('#default').click( function() {
alert('Handler for .click() called.');
} );
Try:
onclick="$('#default').click(function() { alert('foobar'); });"