Meteor 中的 jQuery 无法找到 DOM 选择器答案

【问题标题】：jQuery in Meteor having trouble finding DOM selectorsMeteor 中的 jQuery 无法找到 DOM 选择器
【发布时间】：2015-06-29 03:39:36
【问题描述】：

这是我试图控制其 DOM 元素的模板：

 <template name='libraryTemplate'>
    <div class="container-fluid library_container">
        <div class="row">
            <div class="col-sm-6">
                <h1 id='maglens_library_header'>MY LIBRARY</h1>
                <div id='library_page_break'></div>
                <div id='folders_text'>
                    Folders:
                </div>
            </div>
            <div class="col-sm-6">
                <a class='button-text btn' id='add_new_button'>ADD NEW</a>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3 folders" id='google_drive_thumbnail'></div>
        </div>
    </div>
</template>

这是我用来做这件事的 jQuery。我的$('body') 选择器工作正常，我在$(document).ready() 中的日志语句运行正常，但为什么我不能定位选择器$('.folders')？在检查 DOM 后，我可以确切地看到代码在哪里，但就像 jQuery 认为它不存在一样？

$(document).ready(function(){
    console.log('document ready');
    $('.folders').on('click', function(){
        console.log('folders clicked');
    })
    // $('body').on('click', function(){
    //  console.log('body clicked');
    // })
});

【问题讨论】：

为什么不简单地使用模板事件？
由于.folders 的 div 中没有任何文本，您确定您点击的是正确的 div 吗？在$(document).ready() 中尝试console.log($('folders').length()，看看它会输出什么。

标签： javascript jquery dom meteor

【解决方案1】：

我绝对会像其他人建议的那样推荐使用流星事件。

你所拥有的实际上是有效的，只是因为带有“文件夹”类的 div 没有内容，所以 div 非常小（除非你在“.folders”或“#google_drive_thumbnail”上有一个高度属性），因此很难点击。检查 div 上的元素，你会看到大小

【讨论】：

【解决方案2】：

我没有看到任何名为 folders 的选择器。

我确实看到了<div id='folders_text'>。

这就是为什么你的 body 事件会触发而你的另一个不会。

其次，您应该使用模板事件，您现在正在使用 Meteor。

Template.libraryTemplate.events({
  'click .folders': function() { console.log('clicked') }
})

【讨论】：