我无法在 Jquery 和 Meteor 中选择这个特定的 ID答案

【问题标题】：I cant select this specific ID in Jquery and Meteor我无法在 Jquery 和 Meteor 中选择这个特定的 ID
【发布时间】：2015-03-29 10:25:27
【问题描述】：

我收到了

<template name="showBacklinks">
<div class="col-md-6" id="backlinkcontainer" role="main">
        <h1>Backlinks</h1>
            <ol>
                {{#each url}}
                <div class="magicshit">
                <li><a href="{{backurl}}">{{backurl}}</a>
                <button type="button" id="delete" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></button>
                </li></div>
                {{/each}}
            </ol>
</div>

我希望当我点击按钮时，我点击的当前 li 将获得class="magictime puffOut"，但我总是选择错误的东西..

这是我的 Jquery/Meteor 代码：

    Template.showBacklinks.events({
    'click #delete': function(){
        var x = this._id;
        $(this).addClass('magictime puffOut', function(){
            Backlinks.remove(x);
        })
    }
})

【问题讨论】：

标签： jquery css select meteor

【解决方案1】：

您必须使用传入的事件来定位 DOM 元素，而不是 $(this)，如下所示：

Template.showBacklinks.events({
'click .delete': function(event){
    var x = this._id;
    $(event.target).addClass('magictime puffOut', function(){
        Backlinks.remove(x);
    })
}

【讨论】：

【解决方案2】：

为了将magictime puffout 类正确添加到与单击的button 关联的li 元素中，我建议您像这样定义您的事件处理程序：

Template.showBacklinks.events({
    'click .delete': function(event, template) {
        var buttonControl = event.currentTarget;
        var $listItemElement = $(buttonControl.parentNode);
        var idToRemove = this._id;
        $listItemElement.addClass('magictime puffout', function() {
            // Remove element from collection
            Backlinks.remove(idToRemove);
        });
    }
});

注意，与其他答案类似，此事件处理程序使用 delete 作为类而不是按钮上的 ID，因为模板中可能呈现多个按钮。此外，与其他答案不同，此解决方案使用给定 HTML 元素的 parentNode 属性通过 button 控件正确引用 li 元素。最后，请务必按 ID 从相关集合中删除文档。

编辑：将另一个答案与我的结合起来，为这个问题创建最佳答案。

【讨论】：

您的解决方案的问题是它不等待删除。 Meteor 更新速度比 puffOut 效果快。而且我太愚蠢了，无法在您的示例中进行更改:(
那么完全可以添加setTimeout() 调用。确定 thr 动画影响其变化的时间长度并为此设置超时长度。然后可以安全地删除集合文档。
拉姆齐的答案，没有setTimeout也可以工作。我想是因为它在一个函数中？但我不知道如何在您的示例中插入它
据我所知，jQueryaddClass()函数没有双参数版本，只有两个一参数签名。说他是哈德的建议是行不通的。
我明白了。很好，很高兴您找到了可行的解决方案！ :-)

【解决方案3】：

对于模板{{#each}} 循环生成的每个项目，您都使用相同的id； id 标签在整个文档中是唯一的。删除 id 并将其替换为删除类并将其用作您的选择器，看看？

class="btn btn-default delete"

Template.showBacklinks.events({
    'click .delete': function(){

【讨论】：

还是不行。我之前也尝试过上课，我刚尝试过的ID是因为我很绝望:(