Visit link when triggering click [duplicate] - javascript

This question already has answers here:
jQuery find events handlers registered with an object
(16 answers)
jQuery 1.8 find event handlers
(2 answers)
Closed 8 years ago.
I have some links that have events bound to them and some links that do not.
These links are having their click event triggered by a change in a select box.
See this fiddle
Is there a way for jquery to visit a link if there is no event bound that link?
I do not want to reference the url within the select box vlaue attribute, I want to reference the url in the anchor tag.
something like (pseudo code) -
if (link.hasEventHandler('click')){
trigger click
} else {
window.location = link.attr('href')
}
EDIT - There's a plugin that does exactley what I need to do here - https://github.com/sebastien-p/jquery.hasEventListener
File size is an issue, so I'd like to avoid using it.
I'm using the latest jquery so cannot use .data('events')

As far as I am aware you can't 'fake click' in JS. The click event trigger simply triggers the onClick JS event, and does not simulate clicking on a link in the browser, entirely. However, all you need to do is grab the href and redirect to that page using JS. I updated your fiddle with a couple of lines that do this.
http://jsfiddle.net/9j8QS/1/
$('a:not(.event-bound)').click(function(event) {
window.location.href = $(this).attr('href');
});
The selector selects all anchor tags that don't have the class event_bound.

You could implement something the Dropdown button from Twitter Bootstrap (http://twitter.github.com/bootstrap/components.html#buttonDropdowns). Bootstrap also allows you to customize your download. When you select only dropdown, it comes out to ~40kb. It doesn't even require jQuery because it's all CSS.

Looking at your code, you have to select the link with the href attribute which is same with the selected value in your combobox. Something like:
$('#nav').on('change', function(event) {
var targetHref = $(this).find("option:selected").val();
$('a[href="'+targetHref+'"]').each(function() {
$(this).trigger('click');
});
});
Assuming you have a click event for your links. If not, just give your links the same class and write a click event for that class to set the window location to the href attribute of the object.

Related

Wordpress search doesn't work on button click

I am trying to make search work on button click on opening of popup using below jQuery code
jQuery(function($) {
$('#secondaryButton').click(function() {
alert("The paragraph was clicked.");
$("button.elementor-search-form__submit").click();
});
});
I have tried adding script code in header.php it doesn't work
I also tried adding script code in custom js on page level using elementor pro plugin, it doesn't work
I am not sure why scripting doesn't work. The link which i am working is
https://adelaidebuildingconsulting.com.au/
Once you click search icon, a popup will open and i am looking to implement search on 'search' button click. Any help would be highly appreciated.
There's two issues in your code. Firstly the right-side panel which contains the #secondaryButton element doesn't exist in the DOM when the page loads, so you need to use a delegated event handler.
Secondly, you need to invoke the click() method on the button element directly, not through jQuery. To do that use [0] to retrieve the Element from the jQuery object:
$("button.elementor-search-form__submit")[0].click();
However, in this case better practice to submit the form element would be to invoke the submit event on that element, not the click of its button:
jQuery(function($) {
$(document).on('click', '#secondaryButton', e => {
$("form.elementor-search-form")[0].submit();
});
});
That being said, the best practice would be to completely remove the need for any JS hacks to form a relationship between your form and an external submit button. If you rearrange your HTML so that the clickable 'Search' element is a <button /> element within the form then you get the behaviour you require by default, without the need for any JS.

Clicking a <span> tag to run JQuery javascript function [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I create a span using PHP like this.
if ($subnetkey == 1 ) { echo ("<span class='subnetkey'>S/N of: $subnetnum</span> ");}
It works, and shows the correct data on screen. Additionally if I look at it using 'Inspect Element' its properly formatted.
<span class="subnetkey">S/N of: 780</span>
I have this script at the top of the page. I've also tried it at the bottom.
<script>
$(document).ready(function(){
$(".subnetkey").click(function() {
alert("subnet click mode");
});
});
</script>
When I click the span, nothing happens. I get no errors, and of course I don't see the alert fire.
It seems like this is a timing issue between building the page dynamically and using the page. But in case thats not it, what can I do to make the function fire?
JQuery Event Methods like click(), dblclick(), mouseenter() etc. work only for elements already created when DOM is rendered. For dynamically created elements you use on() method with the below syntax (see previous post):
$(staticAncestors).on(eventName, dynamicChild, function() {});
Since it is a dynamically created element your code won't work. Try:
$(document).on('click', '.subnetkey', function() {
alert("subnet click mode");
});
jQuery is only aware of the elements in the page at the time it runs, so new elements added to the DOM are unrecognized by jQuery. To combat the problem use event delegation, bubbling events from newly added items up to a point in the DOM which was there when jQuery ran on page load. Many people use document as the place to catch the bubbled event, but it isn't necessary to go all the way up the DOM tree. Ideally you should delegate to the nearest parent existing at the time of page load.

jquery addClass() to enable a button as a link [duplicate]

This question already has answers here:
jQuery click() still being triggered after .clickable class is removed
(7 answers)
Closed 7 years ago.
On page load, I have a class attached to a bootstrap <button> called .link-active that I use to make the <button> act like a link with this script:
$('.link-active').click(function(){
window.location='foo.php';
});
However, when I successfully remove the .link-active class using removeClass(), the button continues to act like a link when clicked and takes me to foo.php even when the class isn't on there. Any ideas as to what I am doing wrong?
Prior to removing the class you should also remove the event:
$('.link-active').off('click');
Or use chaining:
$('.link-active').off('click').removeClass('link-active');
The reason it continues to work is because the attached event already has a reference to the element its attached to. It doesn't query the DOM every time. If you don't want to remove the event you could use event delegation to attach the event and then it would work the way you imagine.
$('body').on('click', '.link-active', someFunction);

jQuery Click Function not Working on Class [duplicate]

This question already has answers here:
Events triggered by dynamically generated element are not captured by event handler
(5 answers)
Closed 8 years ago.
So I have a bunch of game pieces that I want to be clickable. If I add a click function to a button I get the desired result, but when I add it to the game piece class, it fails to work.
Here is an example that works fine on jsfiddle, but not when I use it in my script:
http://jsfiddle.net/sLt7C/
Here is what I want to do on my page:
$('.gamePiece').click(function(){
$('.gamePiece').addClass("toggled");
});
This doesn't work, but if I switch the identifier to a button on the page it does work:
$('#btn_AddClass').click(function(){
$('.gamePiece').addClass("toggled");
});
What could be causing this to fail?
Not sure if this has any impact on what could be causing it to fail, but the "game pieces" are span elements that are generated after clicking a "New Game" button.
Here is a fiddle showing more code http://jsfiddle.net/sLt7C/4/
For further clarification:
This doesnt work
$('.gamePeice').click(function(){
$(this).addClass("toggled");
});
This works
$('#btn_addClass').click(function(){
$('.gamePeice').addClass("toggled");
});
If the game pieces are added after the page load (i.e. by clicking a button) you need to use event delegation by using jquery .on()
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
$(myContainer).on('click', '.gamePiece', function(){
$(this).addClass("toggled");
});
I think you want this:
$(document).ready(function() {
$(document).on('click', '.gamePeice', function(){
$(this).addClass("toggled");
});
});
instead of
$('.gamePeice').click(function(){
$(this).addClass("toggled");
});
$('#btn_addClass').click(function(){
$('.gamePeice').addClass("toggled");
});
just prove http://jsfiddle.net/aras7/sLt7C/7/

Losing click even when page is loaded with ajax [duplicate]

This question already has answers here:
Events triggered by dynamically generated element are not captured by event handler
(5 answers)
Closed 8 years ago.
I have a page with a left nav which has two links and a main div. The main div is updated with content from the server whenever user clicks a link in the left nav. I use pjax for this.
When user initially comes to this page, the main div has a link with id somelink that shows an alert box when the user clicks the hyperlink. This is accomplished by this code:
$(document).ready(function() {
.....
$('#somelink').click(function (event){
alert("here");
});
....
});
When the second link on the nav bar is clicked, I load content from the server and update the main div. When user clicks first link, again I load content from the server and update the main div. However, this time when I click somelink nothing happens. Its as if jQuery isn't able to detect that there is a link with id somelink because it was loaded via ajax.
Is there a way to overcome this?
You need to use .on and delegate the click handler to a higher level element that isn't being replaced since it's loaded with AJAX.
$(main).on('click', '#somelink', function() {
alert("here");
});
The reason being that when you do $('#somelink'), it goes through the DOM and finds each one as it is. So, when you remove it by replacing, you either need to add that again or use .on
You've replaced the elements and so the attached events. You need to add them differently to make them automatically available after dom updates.
Try the on function:
$('#somelink').on('click', function() {});
Older jQuery versions do the with the "live" function and with even more older version you have to bind your events again after every dom update.

Categories

Resources