We Keep Coding

on click not working as expected on dynamically created elements jQuery

I have a tag when clicked alerts the data-value of the tag. It works fine , but doesn't works when i click on dynamically created elements.
<img id="no_p_fav" src="http://localhost:8000/icons/non_star.png">
Below is how i create dynamic elements
$('.all_candidate_bar').prepend('<div id = "icons"> <a class = "favorite" data-value = "'+data.msg.id+'" > <img id = "no_p_fav" src="{{url("/icons/non_star.png")}}" ></img></a></div>');
Below function doesn't work on dynamically created elements but works fine on elements which were there when the page was loaded.
$(document).ready(function(){
$('.favorite').on('click',function(){
var candidate_id = $(this).data('value');
alert(candidate_id);
});
});
I have also tried this
$('#icons').on('click','a.favorite',function(){//myFunction});
$('a').on('click','.favorite',function(){//myFunction});
How do i make it work for elements for both dynamic and static elements ?

Since the #icon is also created dynamically you cannot use event delegation against it, you need a higher level element that is there since the beginning, body for instance:
$('body').on('click','.favorite',function(){//myFunction});
The a also won't work, since the event is not delegated in this case, it is accessing the element itself
$('a').on('click','.favorite',function(){//myFunction}); // won't work

Try this Code:
$(document).ready(function(){
$(document).on('click','.favorite',function(){
var candidate_id = $(this).data('value');
alert(candidate_id);
});
});

For dynamically created element you need to to delegate the event
$(document).ready(function(){
$('body').on('click','.favorite',function(){
var candidate_id = $(this).data('value');
alert(candidate_id);
});
});

change your function like this way
$(function(){
$(document).on('click','.favorite',function(){
var candidate_id = $(this).data('value');
alert(candidate_id);
});

Changing a child span to a link which calls a function

I have an AJAX function which populates a div with spans of data into a template. I would like to append these spans to links, which when clicked call a function. With what I do have, it does seem an href link is getting added, but the text itself is still not clickable.
Here's the html from the IDE as well as from the developer tools in IE :
<div id="subtotal_menu">
</div>
Here's what I have tried so far:
var $menu = $('#subtotal_menu');
$menu.empty();
$('#checkTemplate').tmpl(data.d.Checks).appendTo($menu);
$("#subtotal_menu").find("span").attr('href','myfunction()');
Also tried to create a separate function to operate on the DOM element:
function createVendorInvoiceLinks() {
var subTotalmenu = document.getElementById("#subtotal_menu").find("span");
var aTag = document.createElement('a');
aTag.setAttribute('href', "myfunction()");
subTotalmenu.appendChild(aTag);
}

This could help you:
var $menu = $('#subtotal_menu');
$menu.find("span").append('Link');
// append an anchor to the span inside #subtotal_menu
// set javascript:void(0) as href to avoid unwanted behaviour on click
$('#subtotal_menu').on('click', 'a',function(){
alert('clicked');
// do whatever myfunction() does
});
//set up a proper event handler and use event-delegation to cope with
//dynamic added element from e.g. your mentioned ajax-request
When you want the whole span to be clickable just change the binding from the event handler from a to span. This way you don't event need to append an anchor.
Example
Reference
jQuery .append()
event delegation

Instead of appending the <a> element to the span, you should do the opposite:
function createVendorInvoiceLinks() {
var subTotalmenu = document.getElementById("#subtotal_menu").find("span");
var aTag = document.createElement('a');
aTag.setAttribute('href', "myfunction()");
aTag.appendChild(subTotalmenu);
}
So you don't generate a <a> with no content.

Get text of specific anchor tag

How can I get the text() value of an anchor tag I have clicked from a set of anchor tags. This code below gets all the text value of the anchor tags:
$('#search-helper-container, .search-match a').on('click',function(e){
e.preventDefault();
var test = $(this).find('a').text();
console.log(test);
});
How can I modify if so that I get only the text value of the anchor tag I click? Fiddle

You need to bind the click handler to the anchor elements with class search-match which are inside the container #search-helper-container. So you need to change the selector as given below then this inside the click handler will refer to the clicked anchor element.
$('#search-helper-container a.search-match').on('click', function (e) {
e.preventDefault();
var test = $(this).text();
console.log(test);
});
Demo: Fiddle

jquery or js code to obtain exact node data for currently selected form item/text/image in a web page

I want to obtain the exact details for the item on a web page that has been clicked on, using jquery.
That item can be a form item (like a checkbox, text box, text area etc) or section of text (in a paragraph or div or other) or list or image ...
What I figured out is the following--
$(function(){
$('*')
.bind('click', function(event) {
//now obtain details of item that has been clicked on...
});
});
Now, I want the exact details- viz the div id/form id/paragraph #, ie all details for that particular item. How do i get this data? I understand that this data is available in the DOM but I just dont know how to get it in this particular case...

Probably the best way to do to use the target property of the event. By default, this returns a non-jQuery object, which isn't particularly useful, however wrapping it in $() solves this issue:
$(function() {
$(document).bind('click', function(event) {
var element = $(event.target);
alert(element.height()); // Get height
alert(element.attr('id')); // Get ID attribute
// ...
});
});
If you want to fix your current method, inside your click() handler, you can access the properties of that element using .attr(), and friends:
$(function() {
$('*').bind('click', function(event) {
alert($(this).height()); // Get height
alert($(this).attr('id')); // Get ID attribute
// ...
});
});
$(this) in the scope of the function references the element that was clicked. There is a list of functions that will return attributes here and here in the jQuery docs. $.attr('id') will return the element's ID, among other things, and $.data() will return data-* attributes.
To get attributes of parent elements, simply use $(this).parent(). For example, to get the ID of the form that contains the clicked element, use $(this).closest('form').attr('id');. Everything is relative to the clicked element ($(this)), so you can just use the DOM traversal functions.
However, using $('*').bind() is incredibly inefficient; you're binding an event handler to every element on the page, when really you should delegate events with .on() (jQuery 1.7+):
$(function() {
$('body').on('click', '*', function(event) {
alert($(this).height()); // Get height
alert($(this).attr('id')); // Get ID attribute
// ...
});
});
This approach only binds one event to <body> instead of an event to every element on the page.

Use the target of click event on page
$(document).click(function(event){
/* store native dom node*/
var tgt=event.target;
/* store jQuery object of dom node*/
var $tgt=$(tgt);
/* example element details*/
var details={ id : tgt.id, height: $tgt.height(), tag : tgt.tagName}
console.log( details)
})

Look at the event.target, and then you can use jQuery's .parents() method to look at every ancestor:
$(document).on('click', function(event) {
var $t = $(event.target); // the element that was actually clicked
var $p = $t.parents(); // the target's parents
var $form = $p.filter('form').first(); // the enclosing form, if it exists
});

Get href of wrapping anchor on click

I need to be able to get the href (or somehow get the target url) of any <a> tag that is clicked even if it is wrapping another element. For example, you could ordinarily do:
$("document").click(function (event) {
url = event.target.href;
});
However, in this example, the <a> wraps an <img>, so the event target will not have the href. Using parentNode is no good either, because there is also a span around the img in the example:
http://jsfiddle.net/z7ZYw/
I cannot change the selector either.
So is there any way to get the href in this circumstance?

You're looking for jQuery's closest method:
$(e.target).closest('a');

As a note, this can be done without jQuery aswell:
var href = (e.target.parentNode && e.target.parentNode.href) ? e.target.parentNode.href : e.target.href;

You need to bind only on anchor tags:
$("a[href]").click(function () {
console.log($(this).attr("href"));
});