I have looked around for this but cant seem to get this working. How do I click something in the DOM with jQuery, not a user action, but JS action?
JS:
$('a#more').click();
HTML:
<a id="more" href="www.ksl.com">click</a>
See jsfiddle: https://jsfiddle.net/qw7b2ou3/1/
If you want to follow the click, you have to call the DOM method, not the jQuery click method.
$('a#more')[0].click();
or
$('a#more').get(0).click();
The reason why $('a#more').click(); or $('a#more').trigger("click"); does not work is because it only triggers the event handlers attached, it does not actually click the link.
See this JSFiddle to help you out. You will notice this code console logs your selector in an array:
var selectMe = $('a#more');
console.log(selectMe); // [a#more, prevObject: n.fn.init[1], context: document, selector: "a#more"]
To get this selector element you are trying to click you need to access that index of the array.
selectMe[0].click();
Here is the fiddle -- https://jsfiddle.net/qw7b2ou3/2/
Related
How to use click event on tag without id
Hello everybody, I have a html tag bellow:
<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable fc-resizable" href="https://www.youtube.com/watch?v=XXXXX"><div class="fc-content"> <span class="fc-title">event</span></div><div class="fc-resizer fc-end-resizer"></div></a>
this html code was built automatically by jquery so I can't add id or "onlick" event on this tag.
What I want is when I click on this tag, it will open a new windows with href for me. I tried to use
$('.fc-day-grid-event).on('click, function() {
...//
});
But it's not working.
How should I do for this case? Please help.
this html code was built automatically by jquery so I can't add id or "onlick" event on this tag
If you can't control when that happens, you can still use event delegation to get involved in the click event:
$(document).on('click', '.fc-day-grid-event', function() {
...//
});
That works even if the code runs before the element exists. The code in your question only works if the element exists as of when your code runs. See the documentation for details.
As the code is generated after the page rendering, you should use a delegated event handler:
$('body').on('click','.fc-day-grid-event', function() {
//...
});
The original code is missing apostrophes after the class name and after the 'click'.
This should work:
> $('.fc-day-grid-event').on('click', function() {
...//
});
However you might consider to check, if there are other dom elements with that class. An ID is much safer. A workaround could be to use multiple classes in the jQuery selection by selecting the element(s), that matches them all:
$('.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.fc-draggable.fc-resizable')
but this might still be not sufficient, because these framework-classes seem to be dynamically created and maybe deleted and the selection might be too wide or too narow. You could try to select the a tag with parent/child relations, where you know, that you are getting the right element and you could even use the innerHTML of the elements. Alternatively you could iterate through a JQuery-Selection and check for certain attributes.
I'm not sure, if you want to change the target of the link or the target window of the link. Opening the target of a link in a new window works with standard html by using the target attribute
<a href='bla' target='_blank'>bla ...
If you use Javascript for manipulating the target adress of a link outside of the href, the code might get hard to maintain in most contexts and the user might get confused, because he get's to page, he didn't expect. I would try to manipulate the Javascript, that is creating the a tag or if that's really impossible, i would manipulate the existing a tag according to my needs and change the attributes like this, if you want to use jQuery:
For the target address of the link:
$('.fc-day-grid-event').attr("href", "www.newhrefvalue.com")
Or for opening the link in a new tab:
$('.fc-day-grid-event').attr("target", "_blank")
Then you don't need to prevent or emit events or create event listeners.
<a onclick="doStuff(this)">Click Me</a>
I'm using this sample but I wish to use the latest version of Jquery.
I noticed when using Jquery-ui 1.9.0 or above, the dialog does not show up anymore. It works fine with the original version (1.0.8) available in the demo.
Same thing if I use Jquery 2.2.1 (Jquery not Jquery -ui) instead of 1.4.2
The only change I have tried was replacing $('a.delete').live('click',function(){ by $('delete').on('click', 'a', function(){ in order to remedy to the deprecated .live
I can't figure out what else needs to be changed, even after looking at the Jquery and Jquery change logs. The Jquery-migrate tool doesn't give anything wrong.
The goal of the script is to remove a line when clicking on the icon. A dialog should be displayed to invite the user to confirm/cancel.
$('delete').on('click', 'a', function(){})
is not equivalent to
$('a.delete').live('click',function(){})`
These do two different things.
Your .live() one is actually attaching an event to document and then checking to see if the element actually clicked was a child <a class="delete"> tag.
In your .on() example, you are trying to bind an event to a <delete> element, and check to see if the actual element triggered was a child <a>. This is obviously not what you want.
If your elements are being added to the page dynamically, then you can try:
$(document).on('click', 'a.delete', function(){});
This will be the same as your .live().
Why are you changing the selector?
$('a.delete').live('click',function(){})
should be changed to:
$('a.delete').on('click',function(){})
or
$('a.delete').click(function(){})
First of all, I couldn't find this question over here, so I don't know if it has been answered yet.
I have a listener for all the clicks in my site, and then calls a function that checks if the target has the class "wave". If so, it displays a wave effect.
I have tiles with this class, and it works fine, except they have large icons, and if you click them, it does not recognise it as a target with the class.
I tried to put all the tiles inside a div with the class, but somehow it does not recognise it as a target with this class either (I'm assuming it recognize as clicking the target inside them).
I tried to put the 'true' at the end of the listener, in case the bubbling direction could help me, but it didn't.
Any idea? thanks in advance and sorry for my ignorance.
jsfiddle
<div class="tile-container">
<div class="tile efecteona">
<h3 class="titol-tile">Gràfics</h3>
<i class="fa fa-bar-chart tile-icon "></i>
</div>
</div>
"efecteona" would be "wave" class
https://jsfiddle.net/qtLvef8o/2/
As the other answers note, the target returns the actual clicked element which in this case is the icon and not the div with the class.
Since you use jQuery though, why not use its delegate syntax which allows for this ?
$(document).on('click', '.efecteona, button', addOnaEffect);
and set target = this inside your hander.
updated demo at https://jsfiddle.net/qtLvef8o/4/
When you are asking about the e.target it gets the i element, and the i element doesn't have the class you need and neither had the tagname button.
Add this console.log(target); next to your line var target = e.target; and you will see what I'm saying.
When you click an element the event bubbles all the way up to the document, while the target is always the element which initialized it. In your case, it seems that your code assumes the target is a tile element, while in fact it can also be the icon element.
Since you tagged on the question that you are using jQuery, there's a simple solution. Use jQuery closest method.
var target = $(e.target).closest('.efecteona, button').get(0);
Code example
The target is wrong is this case.
I tried to explain by resetting the target when it's the parent that has the class (a bit dirty, can be optimised / better written but it's just to explicitly show the target issue)
https://jsfiddle.net/OxyDesign/wbxvqt2b/1/
I got following problem: I generate a div with "jQuery-Load" links. Theese links inside the div should reload the same div with different parameters. I found a working solution, which generates theese links, which are clickable and... ...trigger the chosen event once. So clicking the same link inside the generated div, after it has been regenerated, doesnt work anymore. Tried a lot of things...
It looks like that now:
click
<div id="aaa0"> I'm the div - level1! </div>
div gets filled - beautyful.
It now contains this: (actually its generated what is why wrote [time] wich is time(); generated in php. as a changing parameter
[...] Link inside Updated Div [...]
when i click the link inside the div it works. when i click it again, it wont...
I want to generate a nice 'click deeper inside the data'-thing, which would be amazing getting this thing work and is the reason why everything must be as best as possible inside the "onclick" event :|
Sorry btw. for the a bit confusing post-style, its a confusing topic, and im not native speaking :)
Thanks for any help or hint in advance,
Harry
Maybe you're missing the concepts between bind and live. In bind, jQuery scans the document and attach a function direct to the element. In live, jQuery attach the function to the document, along with the event and the element as parameters. Once a event bubbles, jQuery check the event and the element, and if it match, then a function executes.
After the first run, the dom has changed, and its gonna work using live.
something like that should work:
click
<div id="aaa0"> I'm the div - level1! </div>
<script>
$('a').live('click', function (e) {
e.preventDefault();
var id = this.id;
$(this).next('div').load('getdetails.php?fNumber=36&env=fun&id=' + id);
});
</script>
basically, what is done is a generic rule, which gives all tags the same behavior. (load next div content). ".live()" is used so that loaded tags work (check the jquery documentation for .live(), or event delegation in general).
I'm not certain about the preventDefault stuff. You might want to use somehting else than tag for the link.
click
made the day :) I don't know exactly why, but maybe its possible preventDefault made the bind and live thing for me. Its working fine, so ...
thanks for the hints! :D
For example i'm using append, and for example i'm appendig button in to a div, and i have function $('button_id').click(... etc to work affter i append the div, how can i do that.I mean i get no errors, but the function is not starting, it's because i append and then i want to use the function but how to do that, i tryed with delegate, but same thing.I tryed with function in the button tag , onmouseover and then the function thing, but nothing it gives me function not found.What is the solution ?
I have two events, one event is click event that appends button, the other event is click event that does something if the button that was appended is clicked, but that second event is not working ?
Try using :
$(elem).live(...)
It will bind event for now and in the future.
Firstly, it always helps if you show us the exact source code. $('button_id') is the incorrect selector to start with, try something more along the lines of $('#button_id') as your selector. Also, are you appending dynamic content? Anyways, I've always used the delegate() function quite successfully, but have you tried using the live() function? Also, one more thing to make sure of is that you have the newest version of jQuery as your source.
As was stated as well, you can not have duplicate ids, if you want to have a pointer, use class, instead of id="some_id" use class="appended". To select those using jQuery, use the selector like this $('.appended').
Try something like this it will work as per your expectations.
$("#button_id").click(function(){
//On click code goes here
}).appendTo($("#div_id"));
It's difficult to determine the problem you're having without seeing your code, but delegate (or live) should be perfect for what you're trying to do:
$("body").delegate("#b", "click", function() {
alert("ok");
});
$("#example").append('<input type="button" id="b" value="Click" />');
The click handler above will fire when an element with id="b" is clicked, whether or not that element happens to be in the DOM right now or not.
However, as others have noted, it's important to remember that IDs need to be unique within a document, so by the sounds of it you may be better of using classes instead.
You can see an example of the above code running here.