How do I successfully select a newly created element with Mustache using jQuery?

Question

I'm generating some HTML based on a mustache template, as such:

function generate_hello(element) {
    var template = jQuery('#hello_template');
    return mustache(template.html(), {
        tooltip: 'Hello'
    });
    ..nothing gets executed here, no selecting in jQuery, no nothing.
}

And so, the element:

<input type='button' value='Hello' class='show'>

Is born! Awesome.

Except this doesn't work if I am to put it after the return mustache...

jQuery('.show');

Nor does this:

$('.show');

And rightfully so. A return means stop execution. Now, I've added that selector before and after the return, removed the return (can't remove the return, because then it just doesn't output the HTML) but nothing works.

How can I select my newly created element to play with it?

Answer 1

You're problem is that you're trying to attach event on dynamically added elements and that just takes a little bit more than adding events in normal routines.

This is how you do it

$('body').on('click', '.show', function() {
  alert("Clicked on element with class show")
});

Update:

function generate_hello(element) {
    var template = jQuery('#hello_template');
    return mustache(template.html(), {
        tooltip: 'Hello'
    });
    ..nothing gets executed here, no selecting in jQuery, no nothing.
}

nothing gets executed here, no selecting in jQuery, no nothing

This is because you are returning from the function. And nothing is executed after return statement. Write your code in some other function and call it after generate_hello function.

Something like

generate_hello();
someOtherFunction

Answer 2

Please check the comments as well as the other answer for valuable information.

The issue is not really with the code, but rather how I designed my system , errr, logic.

This code is being called in a wrapper function (one level above) as such:

var markup = $(window[callback](e.currentTarget));
markup.attr('data-screen', callback);
wrapper.append(markup);

Naturally, I'm simply appending (to my wrapper ) a string of html ( markup ), this obviously doesn't allow for anything to be done inside my original functions, because it simply outputs and nothing more.

It takes the data from my HTML:

<div class="test" data-callback="generate_markup">

And just executed that callback, which is my original generate_hello . Nothing more.

The solution here is to, after it's done with outputting, execute another callback, so, after my wrapper.append(markup); I'd just call my second callback:

var markup = $(window[callback](e.currentTarget));
markup.attr('data-screen', callback);
wrapper.append(markup);
secondary_callback_after_markup_is_done();

I guess the lesson here is: Control your logic and know what each function returns and how it's handled.