I'm writing a jQuery script that adds tooltips to specific links on my web application. The website is constantly adding new links. What I'm trying to do is make it so that, the script will automatically go over all the links on the page and over new ones.
Furthermore, the script also modifies the link itself by changing its colour and prefixing an image before it. This is why I need to keep looking for new links automatically.
What kind of events would I have to hook into to make this happen?
If you want attach event on all links, event if they're dynamically added, you have to use event delegation:
$(document).on('click', 'a', function(){
// ..some code
});
You can change 'click' to another different event like 'hover' and etc.
Try this fiddle, is it what you want? https://jsfiddle.net/btr3dLcx/3/
And btw - better use data attribute like data-color-change-to='red'
Related
Suppose I have a dynamic tag injected at the end of the loading page, using some jquery plugin. Say this tag has a class '.myclass' I want to bind an event so I tried :
$(document).on( 'click', '.myclass', function(){console.log('yes');});
The problem is that, no function is triggered, even when I run this code on my console so it seems that all the related events are listened elsewhere. How can I make this code run correctly ?
Find where the problem was coming from. It was related to the jquery plugin icheck, which customize all the eventlisteners (example, $('document').on('change', target,...) becomes $('document').on('Ifchanged', target,...)), so this plugin captures all the events related to checkbox.
I want to map a tap event to a function that changes the data-theme of a specific element in my document. It looks something like this:
$(document).delegate("#item1", "tap", function() {
$("#item1").attr("data-theme", "e");
});
So far, it kind of works correctly. In the source code I can see it changing the attribute. However, it doesn't get re-rendered on the document and everything appears to the stay the same. Do I have to reload the document or is there a way to make it dynamically update?
First use .on and vclick instead of delegate and tap.
You can read on vclick here, read on .on here
You need to trigger refresh event, than jquery mobile will apply styling to that element again, for example if you change a list view, you can do this
$("#listview").listview('refresh')
In case you want styling changed on an element that has no refresh event, you can trigger page create event on the whole page, that will refresh everything.
$('#pageid').trigger('create')
Check here to see which elements have refresh event
I am new to stack overflow and this is my first question. Pardon me for any mistakes.
This question is more generic but i tried to search for an answer but could not find it.
Say i have a page and i am using jquery ui button() widget for all the button. What happens is i have a specific class defined for all the buttons on my page. So i can just specify $('.myButtonClass').button(); but whenever i render partial views which has button again i have to do the same thing in the partial views. Is there any way i can globally specify a transition for button or any element for that matter.
Here is a sample Fiddle which adds buttons on click. But the added buttons are not transitions as button widgets(I do not want to use clone).
http://jsfiddle.net/wjxn8/
$('.clsTest').button().click(function(){
$(this).after('<input type="button" value="Added" class="clsTest"/>');
});
Is this possible without:-
1) Adding the css classes for a button widget manually for all the buttons created.
2) Tracking DOM Changes using Javascript and perform transitions for all the button elements.
Thanks for your help!!!
Since you were looking for something else, why not trigger a custom event when you load partials or whatever:
$('.clsTest').button().click(function(){
$(this).after('<input type="button" value="Added" class="clsTest"/>').trigger('addButtonUI');
});
$(document).bind('addButtonUI',function(){
$('.clsTest').button();
});
http://jsfiddle.net/wJXN8/3/
If you trigger your event and have the document listening for it, then you can do whatever you would like. I could have put in there the ability to add more buttons as well, but this should get the point across.
What you are asking for, some event when a button is added.... you would need to come up with that yourself and trigger it when a button is added. There is this: How to detect new element creation in jQuery? which talks about a specific event that is triggered when new elements are added to the DOM. Haven't tested it, and it looks like it may not work on IE.
I'm not a huge fan of this, but you could poll for new buttons. Check out my fork of your fiddle (that sounds funny):
http://jsfiddle.net/lbstr/Hq97H/
Using your example, this would look like:
setInterval(function(){
$('.clsTest').not('.ui-button').button();
}, 1000);
As I said, I'm not a huge fan of this. I understand the desire for something like $.live here, but I still think its better to initialize your new content when you add it. If you are making an ajax call for new content, just initialize it when you add it to the DOM.
My silly polling code and $.live (which is now deprecated) might be convenient, but they perform terribly. Just my two cents. You know your code better than I do!
I have a website, where I allow other developers to host content.
My aim is to log clicks on every hyperlink (even the content that is hosted by other developers) ,which exists on the page.
My initial approach was as follows:
$('a').click(function(event)
{
//do my logging
return true;
}
);
Now with the above approach , I am facing the following issues:
Developers may have images inside the anchor link, so the events target is an image rather than href
Many developers have their own way of handling an href click , using an onclick event rather than a simply href='' attr
Some developers add their custom attr , to the tag, and have custom functions to handle the clicks
so basically , the issue is , there is a huge variety of anchor tags available, and logging clicks is not as simple.
Many cases allowed me to log the data I wanted, but a few cases , broke the code badly.
My aim to post on this forum was:
to discuss what is the right approach to do hyperlink clicks logging in a dynamic environment
is there a plugin out there , which allows a functionality like this.
I know facebook and google have this , but they have a totol control, on what is being hosted in their environments.
Any help is greatly appreciated.
Adding a click handler to every link is not a good idea. You should make use of event delegation (which will only attach one event handler at the root of the document):
$(document).delegate('a', 'click', function(event) {
// logging
});
Update (17.12.2011):
Since jQuery 1.7, one would use .on() [docs]:
$(document).on('click', 'a', function(event) {
// logging
});
Regarding your problems:
Developers may have images inside the anchor link, so the events target is an image rather than href
Events bubble up as long as propagation is not canceled. It depends on what you want to log. With delegate the event.target property will point to the image, but this (inside the handler) will point to the a element.
So you should have no problems here (example: http://jsfiddle.net/cR4DE/).
But that also means to you will miss clicks if the developers cancel the propagation.
(Side note: You could solve this letting the event handler fire in the capturing phase, but IE does not support this (hence jQuery does not either).)
Many developers have their own way of handling an href click , using an onclick event rather than a simply href='' attr
This will not touch existing event handlers.
Some developers add their custom attr , to the tag, and have custom functions to handle the clicks
Not sure what you mean here.
It also depends on how the other content is included. E.g. the above code won't track clicks in iframes.
In your logging code you should check for the bad cases and deal accordingly.
For example in your first case i you get the image and walk the dom up until i would find an a tag and log the href from there.
There will be some cases in which you will not be able to do the logging but if they are small compared with the cases you can do that you will be fine :).
I'm currently developing an ajax application and I'm looking for a feature that lets me intercept all static and dynamic links using javascript. The links look like these:
link 1
link 2
etc.
I then want the browser to redirect to: current.page/#link1/ rather than current.page/link1/. I'm using jQuery, so the live() function is an option, however using that as a solution just seems rather sluggish to me(am I hysterical?). If there is a way to intercept ALL links on a page, maybe through detecting a change in the address, that would greatly help. I've tried a few plugins for jQuery (jQuery address & SWFaddress) but they only seem to have event handlers that respond to changes in anchor tags in the address. Any ideas?
thanks for your time
Don't worry to much about performance unless you have to. Often the elegant solution is also the right one.
I would use jQuerys live function, bind to the click event and rewrite the link as it is being clicked on.
Hope this helps, Egil.
What the live function does is it binds an event handler to the document, which catches all click events and then detects all clicks that match the selector, in your case the link elements. This is the most efficient way of catching all link clicks.