胡子模板后如何检查元素是否存在答案

【问题标题】：How to check element does exist after mustache templating胡子模板后如何检查元素是否存在
【发布时间】：2013-06-18 08:42:20
【问题描述】：

我有这个胡子设置：

$.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> 元素上添加一些操作，类为 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>

【问题讨论】：

具体是什么问题？它返回 undefined ， null 还是什么？当你发射.doesExist() 时？控制台错误？
放置一个点击处理程序来测试一个元素是否存在在概念上是错误的。如果它不存在，则没有什么可点击的！
确保在元素加载完成时绑定元素。分享您的完整代码以进行验证。
你是在 $.getJSON() 回调中执行测试，不是吗？
请参阅下面的答案中的解释。

标签： javascript jquery templates mustache

【解决方案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.
 //*******************

【讨论】：

【解决方案2】：

试试

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

jsFiddle

【讨论】：