I have a button when clicked i want it to ensure the .mo function is called, however it will only run that function on the second click.
The mealplan() function is running correctly
HTML
<button class="" id="mealbtn" onclick="mealplan()">CLICK ME</button>
I need both the mealplan() and .mo function to be called upon click.
function mealplan(){
// also runs on click
}
Shopify.mo = function(q,ref) {
// this is the function that I need to run uupon click, but it is only running on second click
};
$('#mealbtn').on('click', function(e) {
// should call the .mo function on click
Shopify.mo(Shopify.queuemeals,"note");
});
The jQuery on('click') method only happens when the button is clicked.
Your code is suggesting that when the button is clicked, we initialize the button's click method.
To fix it, move your jQuery event to a function that runs when the page loads:
$( document ).ready(function() {
$('#mealbtn').on('click', function(e) {
// should call the .mo function on click
Shopify.mo(Shopify.queuemeals,"note");
});
});
Related
i wrote this:
document.getElementById("seite7_pbildchat").onclick = function() {seite5_wechseln(pemail);};
So i want add an onclick eventlistener to the elemt immediately fires. So the function is calles without an user click. It should only be fired when the user is clicking it.
function setData(){
seite5_wechseln(pemail);
}
$(document).ready(function() {
// initializing on load
setData()
// defining on id click
$('#seite7_pbildchat').on('click',function(){
setData()
});
// if u want to trigger manually
$('#seite7_pbildchat').trigger('click');
});
I want to have a set of events the first time a specific element is clicked. Also, another set of events the first time another element is clicked.
Currently, just the first function is working. Nothing happens when I click the next element. No console errors, nothing.
$("#make-rect").one("click", function() {
$('.js-tour-1').addClass('hidden');
$('.js-tour-2').removeClass('hidden');
});
$(".elemRect").one("dblclick", function() {
$('.js-tour-2').addClass('hidden');
$('.js-tour-3').removeClass('hidden');
});
I have this sample code here
http://jsfiddle.net/DBBUL/10/
$(document).ready(function ($) {
$('.creategene').click(function () {
$('#confirmCreateModal').modal();
$('#confirmCreateYes').click(function () {
$('#confirmCreateModal').modal('hide');
var test = "123";
alert(test);
console.log(test);
});
});
});
If you click the create button 3 times and each time you click yes on the confirmation, the alert is fired multiple times for each click instead of just one time.
If you click the create button 3 times and each time you click no and on the 4th time you click yes the alert is fired for each of the previous clicks instead of just one time.
this behavior seems weird to me as i would expect the alert to be fired once per click. Do I have to use .unbind() or is there a better solution?
Could someone please tell me why this is happening and how to fix it?
Thanks
Because you are binding it multiple times. Click event inside a click event means every time you click, a new click event is being bound on top of the previously bound events. Do not bind click events inside of click events unless the click event creates the element. There's also no need to re-initialize the modal over and over.
$(document).ready(function ($) {
$('#confirmCreateModal').modal({show: false});
$('#confirmCreateYes').click(function () {
$('#confirmCreateModal').modal('hide');
var test = "123";
alert(test);
console.log(test);
});
$('.creategene').click(function () {
$('#confirmCreateModal').modal('show');
});
});
Demo
change the code like this
$(document).ready(function ($) {
$('.creategene').click(function () {
$('#confirmCreateModal').modal();
});
$('#confirmCreateYes').click(function () {
$('#confirmCreateModal').modal('hide');
var test = "123";
alert(test);
console.log(test);
});
});
fiddle
You dont have to bind $('#confirmCreateYes').click in each button click.
You can try this also -
$("#confirmCreateYes").unbind().click(function() {
//Stuff
});
Add this to your code:
$( "#confirmCreateYes").unbind( "click" );
Like this:
$(document).ready(function ($) {
$('.creategene').click(function () {
$('#confirmCreateModal').modal();
$('#confirmCreateYes').click(function () {
$('#confirmCreateModal').modal('hide');
var test = "123";
alert(test);
console.log(test);
$( "#confirmCreateYes").unbind( "click" );
});
});
});
It will unbind the event, so that it isn't bound on top of the previous event. This allows the event only to fire within the original click event.
This is not a good method. It will unbind all click events attached to the element. I will leave it here for learning purposes.
As of now its the below code worked for me,
$("#parentID").off("click", ".button").on("click", ".button", function(e){
e.preventDefault(); // stop probagation if its button or a href
// your code here
});
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;
in my html page, i have an image, and on clicking a button, i'm calling the function TestLoad() where it is changing the src of the image and when the image is loaded i'm doing something...
take an example:
javascript:
function TestLoad() {
alert('before');
$('#ImgTest').attr('src', 'Images/Image1.jpg');
$('#ImgTest').load(function () {
alert('after');
});
}
html:
<img id = "ImgTest" alt="" src="" style="width:100px; height:100px"/>
<input type="button" onclick ="TestLoad();" value="TestLoad"/>
my problem is:
when i click the button for the first time, i'm getting the alert "after" one time and if i click another time, the alert will be displayed two time and the third, 3 times...
Kindly advice
Thanks
Each time your handler executes, it adds another new load handler. You only need to assign the handler a single time. If you really need to do it this way, you can either remove the existing handlers first or check the events to see if it's already being handled:
var $imgTest = $('#ImgTest');
$imgTest.attr('src','Images/Image1.jpg');
$imgTest.unbind('load');
$imgTest.load(function(){
alert('after');
});
Or:
var events;
var $imgTest = $('#ImgTest');
$imgTest.attr('src', 'Images/Image1.jpg');
events = $imgTest.data('events');
if(events !== null && typeof events.load === undefined){
$imgTest.load(function(){
alert('after');
});
}
Your onclick event is probably binding another load event.
You don't need to keep adding the event to it. It already exists. If you need to bind another one, you'll want to unbind the previous event first.
.on("load", function() { ... });
.off("load");
You are binding multiple functions in your event handler
//bind this outside of your test load method
$('#ImgTest').load(function () {
alert('after');
});
function TestLoad() {
alert('before');
$('#ImgTest').attr('src', 'Images/Image1.jpg');
}