Changing a child span to a link which calls a function - javascript

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.

Related

click events in JavaScript

I'm building a list of images dynamically. What I want to happen is when a user clicks the close text (inside my DIV element) the code will delete that particular image (list element). The code below does that the FIRST time the DIV is selected. After that it seems to ignore my div event listener and jump straight into the jquery on click function.
function removeItem(){
var test = document.querySelector('li > div').addEventListener('click', function(){
$(document).on('click', 'li', function () {
var photoId = (this.id);
$("#"+photoId).remove();
});
});
How can I make it so it will ALWAYS run when the DIV is selected instead of just the first time?
I'm new to learning about JavaScript so any help is appreciated!
When the user clicks on the DIV, you're not removing anything, you're just adding a new click listener on all LIs that removes that LI. Then the user needs to click again to trigger the second handler. It should simply be:
$(document).on('click', 'li > div', function() {
$(this).parent().remove();
});
BTW, there's no point in writing
var photoId = (this.id);
$("#"+photoId).remove();
It's simply $(this).remove(). Why go searching for an ID when you already have a reference to the element itself?

Creating an element that can remove it self?

I'm building a lightbox as a school project, and I can't use jQuery. I've got an image. When you click it, Javascript makes a transparent div with the ID "overlay". I want the div to remove itself, or the parent to remove it but it doesn't work. I think it has to do with the fact that you can't link 'onclick' to an element that doesn't exists yet.
You have to remove the element from the parent. Something like this:
d = document.getElementById('overlay');
d.parentNode.removeChild(d);
Or you could just hide it:
d.style.display = 'none';
And, oh: you can add Javascript code to a (newly created) element by assigning a function to the onclick attribute.
d = document.createElement('div');
d.onclick = function(e) { this.parentNode.removeChild(this) };
You can remove the element like the following
var el = document.getElementById('div-02');
el.remove(); // Removes the div with the 'div-02' id
Click here for more details
Don't use the onclick handler in the tag, use Javascripts event functions such as addEventListener to dynamically add the event to the elements. You should also make sure that when you remove the elements you properly clean up all your references (in other words, unregister the event handlers).
I've got it :)
I was doing it like bart sad, but it didn't work. my code looked something like this:
image.onclick = function(){ *create overlay*};
overlay.oncklick = function() {*overlay.parentNode.removeChild(overlay)*};
the browser goes like wtf? cause it reads the code and thinks "i cant check if the user clicked a non-existing element."
So I did this:
image.onclick = function(){
*create overlay*
overlay.onclick = function() {*remove overlay*};
};

Not fully working jQuery script which changes div content

so my problem is here:
http://jsfiddle.net/hskhu/
When i click "Rejestracja" Link, it changes content of div, but after this when i try to click "logowanie" link nothing matters, i dont know why can someone help me? all divs with contents of Rejestracja and logowanie are under html with display:none atribute
JS here:
<script>
$(document).ready(function(){
$('#change').click(function(){
var $which = $(this).html();
var $wyjmij = $('#' + $which).html();
$('#loginbox').html($wyjmij);
});
});
</script>
You are binding an event to the element with the id #change. You are replacing the element when the link is clicked, meaning the current bound event has no valid target.
You need to bind the event to a closer static element and delegate the event to the #change.
You can do this using on().
Check the section on Direct and delegated events in the on() documentation.
Change your code to the following:
$(document).ready(function(){
$("#loginbox").on("click", "#change", function(){
var $which = $(this).html();
var $wyjmij = $('#' + $which).html();
$('#loginbox').html($wyjmij);
});
});
DEMO - Using dynamic bindings by binding to #loginbox targeting #change

how to latebind click handler after ajax call without using callback

we are trying to create a custom cms where when inside anchor tag you put a rel attribute and a target position and it automatically attach a click that can fetch data from specified location in rel tag. again new content(came through ajax) can have anchor tag with rel attribute.
how can i achieve it without using callback
current code
$(document).ready(function(e) {
$("a[rel $= txt]").each(function(index, element) {
$(this).click(function(){
var path = $(this).attr("rel");
path = "./"+path;
var target = $(this).attr("data-target")
$(target).load(path, function(){
$("a[rel $= txt]", this).each(function(){
$(this).click(function(){
var path = $(this).attr("rel");
path = "./"+path;
$("#result").load(path,function(){
$.getScript("js/common.js")
});
})
});
$.getScript("js/common.js");
})
})//click ended
});
})
You can use $(match-expression).live('click',function(){}) to attach a click handler to all matching elements, even those that are created dynamically later. In your case, $("a[rel $= txt]").live('click',function(){}) will allow you to attach a click handler to all matching anchors.

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"));
});

Categories