I try to replace an onclick event with other onclick event with javascript:
<button id='myButton' onClick=""/>
OLD onClick event :
$('#myButton').click(function(){
alert('1');
});
and then i do the same like that and change the value of alert , i do like this :
$('#myButton').click(function(){
alert('2');
});
The result of method above is alert show twice for 1 and 2. What i
want is only 2 that must show (i replace alert('1') with alert('2');
not add another alert. How to fix my code?
Try this one:
$(document).off('click', '#myButton').on('click', '#myButton', function(){
alert('2');
});
It will unbind previous event listener and add the new one.
You have 2 jQuery event listeners which listen same element. They know about element's id and this is enough for they work.
What I'm trying to say, that they don't care about onClick
You should code two JS functions, but not jQuery event listeners.
<button id='id' onClick="choose function"/>
function myFunction1() {
//your code
}
function myFunction2() {
//same
}
Finally the problem has been solved. I use method unbind like explain from here :
http://api.jquery.com/unbind/
For my case :
$('#myButton').unbind("click");
Thank you.
Related
I have got this html. So, i want what CreateWorld calles once. I think this is may do with JQuery function, such as disable(). But i don't know which.
<input type="button" value="Создать мир" onclick="CreateWorld()" class="create_button"/>
I need the button to fire the first time just click on it. I can create a counter. But I think there are any simple solutions. But I do not know what
Thanks!
If you're using jQuery, and want this function to be called once:
$('.create_button').one('click',function(){
CreateWorld();
});
JS Fiddle demo.
The above will allow the event handler to fire once.
Or:
$('.create_button').click(function(){
CreateWorld;
$(this).prop('disabled',true);
});
JS Fiddle demo.
This will allow the button to have a click handler to be assigned for every click but will, after it's been clicked once, disable the button (preventing it from receiving clicks/user interaction).
To use plain JavaScript (albeit requiring a standards-compliant browser):
function buttonActions (){
CreateWorld();
this.disabled = true;
}
document.querySelector('.create_button').addEventListener('click', buttonActions);
JS Fiddle demo.
References:
('Plain') JavaScript:
addEventListener().
document.querySelector().
jQuery:
click().
prop().
one().
You can use jQuery .one() it will only listen click event once
HTML :
<input type="button" value="Создать мир" class="create_button"/>
JQUERY :
$('input.create_button').one('click',CreateWorld);
Try
$('.create_button').on('click',function(){
CreateWorld();
$(this).attr('disabled','disabled');
});
$('.create_button').on('click',function(){
if($(this).hasClass('disabled')) return;
CreateWorld();
$(this).addClass('disabled');
});
So later if you are making ajax call u can remove class to make button to work
onSuccess : $('.create_button').removeClass('disabled');
onFaulure : $('.create_button').removeClass('disabled');
I am trying to disable a link that submits my form after it has been clicked. This is needed to stop duplicate requests from the same user. Here is my code, but unfortunately it is not working.
<a id="submit-form-link" onclick="document.forms[0].submit()" class="next">Next <span>Step</span></a>
<script type="text/javascript">
$('#submit-form-link').click(function(){
$('submit-form-link', this).attr('style', 'pointer-events: none;');
});
</script>
I feel like I am close but it just is not working.
You're going about this wrong. Get rid of the inline onclick event handler and use this inside a document ready call:
$('#submit-form-link').one('click', function(){
$('form').submit();
});
This binds the click event to your link, but unbinds it after the first click.
You can see this in the console in this jsFiddle example. The first time you click the link it attempts to submit the form, but doesn't try on subsequent clicks.
Try this:
...
$('submit-form-link').off().click(function() { return false; });
...
<a id="submit-form-link" onclick="document.forms[0].submit()" class="next">Next <span>Step</span></a>
<script type="text/javascript">
$('#submit-form-link').click(function(){
if (!$(this).hasClass('disabled')) {
$('submit-form-link', this).attr('class', 'next disabled');
return true;
}
return false;
});
</script>
Here, you can create a class disabled and style it as you want. Just add this class after clicking the button so you will know that it is disabled. Then you return false to stop the event if the button was already clicked.
bind the click event again in the first click event callback function
$('#submit-form-link').click(function(){
$('submit-form-link', this).attr('style', 'pointer-events: none;');
$(this).click(function(e){e.preventDefault})
});
You have to remove the onclick attribute.
$('#submit-form-link').click(function(){
$(this).removeAttr('onclick');
});
Also, $('submit-form-link', this) is totally wrong. You are selecting nodes of type submit-form-link that are children of this. First of all you'd need #submit-form-link and second this is already a reference to the link node you just clicked.
I have this working code, I need to change to a click instead of mouseover:
var l1OK_WC = false;
var l2OK_WC = false;
function share()
{
alert('yo');
}
function getIt_wc()
{
if(l1OK_WC && l2OK_WC)
window.open('http://google.ca','_self');
if(!l1OK_WC)
alert("Click button one");
else if(!l2OK_WC)
alert("Click Button two");
}
After this, I have this code:
onmouseover="javascript:l1OK_WC=true;"
onmouseover="javascript:l2OK_WC=true;"
How do I change this part into a click instead of onmouseover.
So they need to click instead of onmouseover.
I have tried changing to onclick but the script does not work anymore. It stays false and always displays the message of "click button one"
Unless I'm misunderstanding, it's just this simple...
onclick="javascript:l1OK_WC=true;"
onclick="javascript:l2OK_WC=true;"
You can change the HTML attribute to onclick, but that's not really best practice. Instead, why not attach an event handler to the elements in question?
Something along the lines of:
// Assuming you've already grabbed the elements and put them in the variable `myElements`
myElements.addEventListener('click', function() {
l10K_WC = true;
});
This lets you centralize your code (so you only need to make one change, instead of many throughout your HTML, as well as helps caching. For more information, see here: https://softwareengineering.stackexchange.com/a/86595/54164
Replace:
onmouseover="javascript:l1OK_WC=true;"
onmouseover="javascript:l2OK_WC=true;"
by
onclick="javascript:l1OK_WC=true;"
onclick="javascript:l2OK_WC=true;"
For more info see:
onClick and onMouseOver
Using an event listener:
<input type="button" value="Button 1" id="myButton1"/>
<input type="button" value="Button 2" id="myButton2"/>
<script>
myButton2.addEventListener("click", function() { alert('button 1 clicked!'; }, false);
myButton2.addEventListener("click", function() { alert('button 2 clicked!'; }, false);
</script>
You can use either the HTML this way:
your-element onclick="JavaScript code"
or use JavaScript to fire it...
object.onclick=function(){JavaScript Code};
If it's in a button you will have to wrap the button around it :-)
Hope this helps...
So I'm going to explain this with an example.
I have a "like" button (class: .like) for my feed or stream. When the user clicks it ( using $(".like") ), it ajaxes it's way to refreshless insert the like into the database (using jQuery).
When it's inserted, I change the text to "Unlike" and the class to ".unlike".
However, when a user reclicks it, it just goes through the same function again, instead of going to the $(".unline").click function. Do I have to "update" the script or something?
For example:
$(".like").click(function(){
alert("Like!");
$(this).attr("class", "unlike");
});
$(".unlike").click(function(){
alert("Unlike!");
$(this).attr("class", "like");
});
The problem is that it won't to the unlike function, it will just repeat the like function even though the attribute is changed.
That is because the "unlike" attr. hasn't been added to the dom when the script loaded. Try this:
<body>
<div class="like_it_or_not">
HELLO!
</div>
</body>
And the JS
$("body").on('click','.like_it_or_not', function(){
$(this).toggleClass('like', 'unlike');
if ($(this).hasClass('like')) {
alert('like');
} else if ($(this).hasClass('unlike')) {
alert('unlike');
}
});
If you don’t want to delegate your click event (which is over-engineering IMO), do a check in the handler:
$(".like").click(function(){
alert( $(this).hasClass('unlike') ? 'unlike' : 'like' );
$(this).toggleClass("unlike like");
});
http://jsfiddle.net/NScyM/
It should check for the 'unlike' class each time you click and toggle classes as expected.
The event binding occurs when you assign run the above code. You have to rebind the event every time, or, better yet, use event delegation:
$(document)on("click",".like",function(){
alert("Like!");
$(this).addClass("unlike");
$(this).removeClass("like");
});
$(document)on("click",".unlike",function(){
alert("Unike!");
$(this).addClass("like");
$(this).removeClass("unlike");
});
I think you will have to use live() or on() to make this work:
$(".like").live("click", function() {
$(this).removeClass("like").addClass("unlike");
});
$(".unlike").live("click", function() {
$(this).removeClass("unlike").addClass("like");
});
Try this one
$(".like").click(function(){
alert("Like!");
$(this).removeClass("like");
$(this).attr("class", "unlike");
});
$(".unlike").click(function(){
alert("Unlike!");
$(this).removeClass("unlike");
$(this).attr("class", "like");
});
To keep my code clean on stuff like this, I assign a class that never changes and tie the click event to that. The styling classes simply act as CSS changes. For instance:
<button class="vote like">button text</button>
$('.vote').click(function () {
var alertText = ($(this).hasClass('like')) ? 'Like!' : 'Unlike!';
alert(alertText);
$(this).toggleClass('like').toggleClass('unlike');
});
Try this
$(document).on('click', '.like', function(){
alert("Like!");
$(this).html('Unlike').removeClass("like").addClass("unlike");
});
$(document).on('click', '.unlike', function(){
alert("Unlike!");
$(this).html('Like').removeClass("unlike").addClass("like");
});
DEMO.
The unlike click event handler has not been associated with the new item. If you're going to be changing the class dynamically like that you're going to want to look at the (jQuery on handler)[http://api.jquery.com/on/]
$(document).on('click',".like", function(){
alert("Like!");
$(this).addClass("unlike").removeClass('like');
});
$(document).on('click',".unlike",function(){
alert("Unlike!");
$(this).addClass("like").removeClass('unlike');
});
Due to a plugin being used, I can't add the "onClick" attribute to the HTML form inputs like usual.
A plugin is handling the forms part in my site and it doesn't give an option to do this automatically.
Basically I have this input:
<input type="text" id="bfCaptchaEntry" name="bfCaptchaEntry" style="">
I want to add an onClick to it with jQuery onload for it to be like this:
<input onClick="myfunction()" type="text" id="bfCaptchaEntry" name="bfCaptchaEntry" style="">
How do I go about doing this?
I know this might not be standard practice but seems like the easiest option to do in my situation.
I'm a newbie to jQuery so any help is very much appreciated.
You can use the click event and call your function or move your logic into the handler:
$("#bfCaptchaEntry").click(function(){ myFunction(); });
You can use the click event and set your function as the handler:
$("#bfCaptchaEntry").click(myFunction);
.click()
Bind an event handler to the "click" JavaScript event, or trigger that event on an element.
http://api.jquery.com/click/
You can use the on event bound to "click" and call your function or move your logic into the handler:
$("#bfCaptchaEntry").on("click", function(){ myFunction(); });
You can use the on event bound to "click" and set your function as the handler:
$("#bfCaptchaEntry").on("click", myFunction);
.on()
Attach an event handler function for one or more events to the
selected elements.
http://api.jquery.com/on/
try this approach if you know your object client name ( it is not important that it is Button or TextBox )
$('#ButtonName').removeAttr('onclick');
$('#ButtonName').attr('onClick', 'FunctionName(this);');
try this ones if you want add onClick event to a server object with JQuery
$('#' + '<%= ButtonName.ClientID %>').removeAttr('onclick');
$('#' + '<%= ButtonName.ClientID %>').attr('onClick', 'FunctionName(this);');
Try below approach,
$('#bfCaptchaEntry').on('click', myfunction);
or in case jQuery is not an absolute necessaity then try below,
document.getElementById('bfCaptchaEntry').onclick = myfunction;
However the above method has few drawbacks as it set onclick as a property rather than being registered as handler...
Read more on this post https://stackoverflow.com/a/6348597/297641
$("#bfCaptchaEntry").click(function(){
myFunction();
});
Or you can use an arrow function to define it:
$(document).ready(() => {
$('#bfCaptchaEntry').click(()=>{
});
});
For better browser support:
$(document).ready(function() {
$('#bfCaptchaEntry').click(function (){
});
});
let a = $("<a>bfCaptchaEntry</a>");
a.attr("onClick", "function(" + someParameter+ ")");
as #Selvakumar Arumugam suggested, but the function call on registering also
$('#bfCaptchaEntry').on('click', myfunction);,
rather than use
$('#bfCaptchaEntry').on('click', () => { myfunction});