javascript - 胡子模板后如何检查元素是否存在

Question

我有这个胡子设置：

$.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);
});

在此之后，我需要<li>使用 class 对我的元素添加一些操作selector。但是这个元素渲染到 DOM 有一点问题。所以我使用小函数来检查这个元素是否存在，但是出了点问题，我没有结果......

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

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

和我的html：

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

Answer 1

尝试这个 ：

$.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.
 //*******************

Answer 2

尝试

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

jsFiddle