I have two buttons using javascript.
First creates text and removes the link and Second creates link and removes the text
Can a click on the link change the text? When they are on a page at the same time it works.
Otherwise it does not.
Yes it can change the text.
Any event on most HTML elements can have their default action overridden.
Having the onclick event object you should use event.preventDefault() to cancel the default action.
An example:
document.getElementById("my-link-element").addEventListener("click", function(event) {
event.preventDefault();
// and here change the text ..
});
Related
I have some links on my page and I need to programmatically perform a click on an element when the user clicks on another element. For example, when I click on element A, jQuery should perform a click on element A2.
I don't know what this is called, technically, and I'm having trouble finding out how to do this. Is this possible in jQuery?
Attached an event handler to your first element (#elementA in the example below) and then trigger a click event on the second element (#elementB below)
$("#elementA").on("click", function (e) {
$("#elementB").click();
});
Here is the Fiddle: http://jsfiddle.net/mifi79/Dar8J/
Use following to do trigger event,When div1 is clicked , Trigger click event for div2
$("#div1").click(function (){
$("#div2").trigger("click");
});
Working demo http://jsfiddle.net/MSSbT/
You can trigger a click via click()
http://api.jquery.com/click/#click
I have some elements having fbutton class. How can I bind a click element only to clicked element. I have a code like this:
$('.fbutton').click(function() {
/*
Some Code 1
*/
$(this).next().click();
/*
Some Code 2
*/
enough;
});
$(this).next().click(); line triggers a click on an element, but also all other fbutton elements are triggered too (this part bothers me).
First solution that comes to mind is that end script processing after Some Code 2. As return; does not work, I used an illegal javascript code that results abnormal end of execution of code. It works, but it is not the correct way of ending execution. How can I end javascript execution or How can I trigger an event only for clicked element.
More Clarification
I want only clicked .fbutton to trigger. So does jquery identify clicked element? Also I can not define any class for any .fbutton element, because trigger should depend on user click.
Have you tried using stopPropagation?
$('.fbutton').on('click',function(e){
e.stopPropagation();
$(this).next().trigger('click');
});
onclick give it a class, and bind the click triggering to it.
$('.fbutton').on('click',function() {
// Code 1
$(this).hasClass('clicked')) ? $(this).next().trigger('click') : $(this).addClass('clicked');
// Code 2
});
Also, using jQuery vs $? I kept it consistent for you, but if you can use $ I recommend it.
EDIT
To clarify my answer:
This is a ternary if statement. It checks to see if the item clicked has a class of clicked, and if it does, then it assigns the click you want to $(this).next(), but if it doesn't have the class already it adds the class (without binding the click statement yet). When the element is clicked again, it will have class clicked, so it should fire then.
This allows you to only have the click event binded to elements that have already been clicked.
SECOND EDIT
Here is a jsFiddle to show it works.
Click example once and nothing will happen but adding the class, click it again and it will trigger the click of the next button, but not anything else. The same is true for the second button, so that you can see they are separate events for each pairing, unrelated to any other button pairs.
In JavaScript (not jQuery), is there a way of preventing a link from triggering an event more than once?
I'm iterating through some anchors and attaching an onclick event to each link, which then reveals some page content relevant to that link from a json file. The only problem is that a double click or repeated clicks outputs the same content again and again.
What's the best approach to prevent this, or should I re-write the script and change the anchors to submit buttons in order to add a disabled state?
Remove the event listener after it is clicked first.
var element = document.getElementById("id_name");
element.addEventListener("click", onClickHandeler, false);
function onClickHandeler(e) {
// Do here what your code have to do
element.removeEventListener("click", onClickHandeler, false);
}
Hope this helps you
I have a single HTML page which has several div class. In second div class I have a registration form. When I click on submit button and check validation and give pop up, after clicking on the pop up it redirect on home div, and I want the registration div class to stay the same after clicking on the pop up button. How can I do this?
if you are using href to get click and call js method. You have to prevent default behavior. It may solve your prob even you don't use href.
function(e){
e.preventDefault();
// your code.
return false;
}
It sounds like the href value for your link is #
You could add
return false;
as the last line of the function bound to the click event
I am newbie to jQuery,
can someone explain what this code does:
$("#currency form").submit(function(e) {
triggers.eq(1).overlay().close();
return e.preventDefault();
});
The first line begins a function that handles the submit event of all form tag(s) in the element with ID currency.
Documentation: Selectors, submit event
The second line closes an overlay in the second element in the triggers variable.
Documentation: eq method, overlay plugin
The third line tries to prevent the submit, but isn't completely correct. (It should be e.preventDefault(); and/or return false;)
Documentation: event.preventDefault, event handlers
triggers = a jQuery object
triggers.eq(1) = get the second element from the matched elements inside the jquery object
triggers.eq(1).overlay() = get the overlay instance (a plugin) on the second element
triggers.eq(1).overlay().close() = close the overlay.
return e.preventDefault(); = prevent the default action (form submission)
On the submit event of the form, it will:
Get the second element in the triggers collection (of jQuery elements).
Get the overlay on that element.
Close that overlay.
Prevent the submit event from bubbling to the parent handler.