.append to a non DOM element jQuery

Question

I'm trying to append to a non DOM element (Pagiantion added for a slideshow).

My code is:

$("#slides2 .slidesjs-pagination-item a").on("click", function (event) {
    alert('append');
});

which does not give me an alert. As on is replacing live, I'm wondering why this doesn't work?

UPDATE The comment by adeno helped, and my code is now :

$(document).on("ready", "#slides2 .slidesjs-pagination-item a", function (event) {
    $("#slides2 .slidesjs-pagination-item a").prepend("Image");
    $("#slides2 .slidesjs-pagination-item a").append(" of 30");
});

which doesn't work, how do I attach an event that recgonises when it is the element is loaded?

`$(document).on("click", "#slides2 .slidesjs-pagination-item a", function(event){...` — adeneo, Nov 29 '13 at 22:41
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — charlietfl, Nov 29 '13 at 22:42
I don't see what your question has to do with appending, nor why you're calling this a "non DOM element". — Blue Skies, Nov 29 '13 at 22:47
Im just using the click function and alert to test .on, by non DOM element i mean it doesnt exist unti the document is ready — TwistedPixel88, Nov 29 '13 at 23:00
`$(document).on("click", "#slides2 .slidesjs-pagination-item a"`, function(event){ } worked thanks, so now my code is `$(document).on("ready", "#slides2 .slidesjs-pagination-item a", function(event){ $("#slides2 .slidesjs-pagination-item a").prepend("Image "); $("#slides2 .slidesjs-pagination-item a").append(" of 30"); });` Which doesnt work, how do i attach an event that recgonises when it is the element is loaded? — TwistedPixel88, Nov 29 '13 at 23:17

score 1 · Answer 1 · answered Nov 29 '13 at 22:43

1

You must bind the event to the parent element, then select the target element using the selector argument. You can find more information about .on() here.

$('#slides2').on('click', '.slidesjs-pagination-item a', function(e) {
    alert('append');
});

answered Nov 29 '13 at 22:43

Austin Brunkhorst

20,704
6
47
61

score 0 · Answer 2 · answered Nov 29 '13 at 22:42

0

Try:

$("#slides2").on("click", ".slidesjs-pagination-item a", function(event){
    alert('append');
});

Though it's hard to tell without seeing any HTML...

answered Nov 29 '13 at 22:42

benhowdle89

36,900
69
202
331

score 0 · Answer 3 · answered Nov 29 '13 at 22:43

0

Two potential pointers:

Does the line below return a number > 0? If not your selector is wrong.

alert($("#slides2 .slidesjs-pagination-item a").length)
You mention that you trying to append to a non DOM element. Is the element you select attached to the DOM at all? If not: you cannot click on a non DOM node.

answered Nov 29 '13 at 22:43

Koen Peters

12,798
6
36
59

.slidesjs-pagination-item a isnt a DOM element, its added by a js file – TwistedPixel88 Nov 29 '13 at 22:56

score 0 · Answer 4 · answered Nov 29 '13 at 22:45

0

$("#blah") wont work if the element is not in the DOM. I guess your template is in parameter, so do this:

$("#blah", myTemplate).click(...

answered Nov 29 '13 at 22:45

Noampz

1,185
3
11
19

.append to a non DOM element jQuery

4 Answers4