jquery在点击时隐藏最近的行答案

【问题标题】：jquery hide nearest row on clickjquery在点击时隐藏最近的行
【发布时间】：2012-08-21 13:15:59
【问题描述】：

当用户点击删除时，我曾经能够使用下面的代码隐藏一行，为什么它停止工作了

$(document).ready(function () {
    $('.deleteRecord').live( function() {
        if(confirm("Are you sure?")){
            $(this).closest('tr').fadeOut();
        }
    });
});

哈姆线

\#{link_to image_tag('/img/icons/packs/diagona/16x16/101.png', :border => 0), schedule, :method => :delete, :remote=>true, :class=>'deleteRecord'}

这是我的 application.js 中的内容，所有其他事件似乎都在工作或触发，减去这个

//= require jquery
//= require rails
//= require jquery_ujs
//= require jquery-ui
//= require best_in_place
//= require plugins

//= require messages
//= require_self


$(document).ready(function() {
    jQuery(".best_in_place").best_in_place();
    $('.best_in_place').bind("ajax:success", function(){
        $(this).closest('tr').effect("pulsate", { times:3 }, 500);
    });

});


$(window).load(function () {
    $('#tab-panel-1').createTabs();
    $('#dataTable').dataTable(
        {
            "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "aaSorting": [[ 4, "desc" ]]
        }
    );
});

$(document).ready(function () {
    $('.deleteRecord').on('click', function() {
        if(confirm("Are you sure?")){
            $(this).closest('tr').fadeOut();
        }
    });

    $('#notice').effect("pulsate", { times:3 }, 500);



});

【问题讨论】：

除了您的问题之外，请确保您确实需要 .live() 它还将为未来的元素绑定，并且应该仅在您在绑定后编辑表格时使用。否则使用 .on()
jQuery 官方文档 从 jQuery 1.7 开始，.live() 方法已被弃用。使用 .on() 附加事件处理程序。旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()。 link
记录是在文档加载之后还是之前添加的？

标签： jquery ruby-on-rails haml

【解决方案1】：

我认为你误用了live 函数：

$(document).ready(function() {
    $('.deleteRecord').live('click', function() {
        if(confirm("Are you sure?")){
            $(this).closest('tr').fadeOut();
        }
    });
});

现在，live 已被弃用，所以只需使用 on

$(document).ready(function() {
    $('.deleteRecord').on('click', function() {
        if(confirm("Are you sure?")){
            $(this).closest('tr').fadeOut();
        }
    });
});

jQuery api.on()

编辑

事件处理程序仅绑定到当前选定的元素；当您的代码调用 .on() 时，它们必须存在于页面上。

on 或 live 的用法取决于您的目的。

【讨论】：

确实不推荐使用live，但是您对on 的使用不提供委托事件处理，这可能是他使用live 的原因。
on 可以用来做与live 相同的“委托”，如果他在文档上使用。看到这个小提琴：link
@JorgeLoureiro：不需要在文档上定义它。实际上，我宁愿建议不要对一些 closer 容器进行评估。

【解决方案2】：

试试这个：

    $(document).ready(function() {
        $('img.deleteRecord').on("click", function() {
            if ( confirm("Are you sure?") ) {
                $(this).closest('tr').fadeOut();
            }
        });
    });

.live() 已弃用，.on() 从 jQuery 1.7+ 开始是首选。

另外，只搜索类名是不好的，如果可能的话，使用上面的选择器。

编辑

如果行是动态添加的，您需要使用以下内容：

    $(document).ready(function() {
        $('#parent').on("click", "img.deleteRecord", function() {
            if ( confirm("Are you sure?") ) {
                $(this).closest('tr').fadeOut();
            }
        });
    });

【讨论】：

他（希望）使用live() 的原因可能是在页面生命周期内动态添加行。因此，您的代码不适用于那些添加的元素。
@RobertKoritnik 很清楚这一点。如果行是动态添加的，则添加一个选项，但仍然使用.on()
行目前不是动态的，但将来会，我已经尝试了上述所有方法，仍然没有运气，甚至没有触发事件
@Paul'Whippet'McGuane 奇怪，如果存在问题，您能否制作一个简洁的 jsFiddle。所以我们可以测试它。
@Paul'Whippet'McGuane 似乎工作正常。这听起来越来越像一个参考的东西或东西。它真的应该工作。

【解决方案3】：

说明：获取与选择器匹配的第一个元素，从当前元素开始，向上遍历 DOM 树。

从当前元素开始向上移动 DOM 树，直到找到匹配的选择器返回的 jQuery 对象包含零个或一个元素

来源：http://api.jquery.com/closest/

编辑

如果您完全理解文档，请尝试使用 Firebug 控制台编写代码。首先，试试这个：

$('.deleteRecord').eq(0).closest('tr').fadeOut();

如果有效，请尝试将此 onlick 函数添加到另一个元素，看看它是否适用。

最后尝试使用 confirm()。

【讨论】：