CODEWITHSUNDEEP
javascriptjquerytemplatesmustache
Lukas
Lukas

Reputation: 7734

How to check element does exist after mustache templating

I have this mustache setup:

$.getJSON('data/data.json', function(data) {
     var template = "<ul>{{#"+elements+"}}<li class=\"selector {{.}}\"></li>{{/"+elements+"}}</ul>";
     var html = Mustache.to_html(template, data);
     panel.html(html);
});

After this I need to add some action on my <li> element with class selector. But there is a little problem with this element rendering to DOM. So I use small function to check this element does exist, but something is wrong and I have no results...

$.fn.doesExist = function(){
    return $(this).length > 0;
};

var picker = $('li.selector');
if (picker.doesExist()) {
    $(this).click(function(){
        console.log('log');
    })
}

and my html:

<div class="panel">
  <ul>
    <li class="selector 01"></li>
    <li class="selector 02"></li>
    <li class="selector 03"></li>
  </ul>
</div>

Upvotes: 0

Views: 503

Answers (2)

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

Try this :

$.getJSON('data/data.json', function(data) {
     var template = "<ul>{{#"+elements+"}}<li class=\"selector {{.}}\"></li>{{/"+elements+"}}</ul>";
     var html = Mustache.to_html(template, data);
     panel.html(html);
     //*******************
     // PERFORM TEST HERE
     //*******************
});

 //*******************
 // $.getJSON() is asynchronous so 
 // performing test here is too early.
 // The response from the server is guaranteed
 // not to have arrived yet.
 //*******************

Upvotes: 2

Dirty-flow
Dirty-flow

Reputation: 2300

try with

if($('li.selector').length>0){
    $('li.selector').click(function(){
         alert("wow")
    })
}

jsFiddle

Upvotes: 0

Related Questions