Function not working

Question

I am prototyping a web app idea i have I have a jsFiddle set up to show you. (crude prototype)

Two of my functions work perfect.

However once the options appear the next function doesn't work when called..

Perhaps i am being blind? i have had a 8hour coding session today.

But once an option is selected the container holding the options should disappear

function begin(){
$( this ).hide();
    $(".center-logo").hide(),
    $(".clapper").show(),
    $(".clapper").text("tap to chose option")
}
function movieChoice(){
    $("#film-list").fadeIn('slow'),
    $(movieList.movies).each(function(index){$("#movies").append('<li class="selector" id="'+this.rating+'">' + this.name  + '</li>');});
}
function movieSelector(){
    $("#film-list").fadeOut('slow')
    $(".clapper").hide()
    $(".date").show()
}

$("#begin").on( "swiperight", begin)
$(".clapper").on( "tap", movieChoice)
$(".selector").on( "tap", movieSelector)

You're using commas where I think you mean to be using semi-colons and not using line delimiters at all in same situation. I'd take care of those inconsistencies and see what happens. — Bill Criswell, Aug 02 '13 at 15:57
Btw, it is clearly written in the [documentation](http://api.jquery.com/on/) (in bold!): *"Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to `.on()`."* — Felix Kling, Aug 02 '13 at 16:02
You probably want to read this about event delegation: http://learn.jquery.com/events/event-delegation/. — Felix Kling, Aug 02 '13 at 16:09

score 2 · Accepted Answer · answered Aug 02 '13 at 16:00

Change this

$(".selector").on( "tap", movieSelector)

to

$("#movies").on("tap", ".selector", movieSelector)

and you're good to go. Your code doesnt work because at the time you bind selector with movieSelector(), its not yet available. This should fix that, because movies is available when the DOM is ready. There's also another way. Instead of binding tap to closest static parent (in this case its movies), you could also bind it to document.

$(document).on("tap", ".selector", movieSelector)

There are two more things wrong with your code :

You are using ready event to do all this. Consider using a page event such pageinit or pageshow to bind your data/ init stuff etc. But since youy dont even have data-role=page in your code, I suggest you remove the jQM tag from your question.
Also, you're using a lot of , instead of ;. You might want to change that.

Thanks this all makes sense, very simple really, ill put it down to an 8 hour coding session earlier — John Vaughan, Aug 02 '13 at 16:09

Konstig · Answer 2 · 2013-08-02T16:05:15.620

1

You need to lissen on #movies

$("#movies").on( "tap", '.selector', movieSelector)

Check here http://jsfiddle.net/SM5QJ/3/

The problem is that you bind it to an element thats not exist in the dom. So what you can do is to bind it to #movies and tell it to lissen on tap event on .selector doing it on this way will keep it updated on appended items to the dom.

You can read more about it here http://api.jquery.com/on/

edited Aug 02 '13 at 16:05

answered Aug 02 '13 at 15:59

Konstig

137
10

Code without explanation is almost always useless. – Felix Kling Aug 02 '13 at 16:01
This works, but i agree, could you explain why? – John Vaughan Aug 02 '13 at 16:06
I have updated my answer. But i rly recomend that you read the api documentation. http://api.jquery.com/on/ – Konstig Aug 02 '13 at 16:08

Function not working

2 Answers2