JQuery .bind() / .unbind()问题

Question

我在JQuery中使用.bind()和.unbind()时遇到了一些奇怪的行为，尽管我的情况似乎与JQuery站点上给出的一个示例完全相同。在这种情况下，绑定/解除绑定应用于JQuery选项卡(多个选项卡中的一个)。单击该选项卡时，它将通过ajax加载一个控制器操作。

# show.html.erb:
$(document).ready( function(){
    var projectNav = function(){
        $("#tabs-project .loadingDiv").show();
        $.ajax({ url: "<%= url_for(params.except(:action).merge(:action => 'show_project')) %>", dataType: 'script' })
    };
    $("#projectMenuButton").bind('click', projectNav);
});

# show_project.js.erb
$("#tabs-project .loadingDiv").remove();
$("#tabs-project").append('<%= escape_javascript(render :partial => "profiles/project")%>')
$("#projectMenuButton").unbind('click', projectNav);

.unbind()部件不是这样工作的-再次单击菜单按钮将再次重新加载部分。

当我将现有的unbind更改为$("#projectMenuButton").unbind('click');时，它将解绑所有内容，包括选项卡的主要函数(将视图切换到右div)。

Answer 1

你有一个范围问题...projectNav仅在$(document).ready的作用域中定义，因此在传递到unbind时是未定义的。一种解决方案：

# show.html.erb:
var projectNav = function(){
        $("#tabs-project .loadingDiv").show();
        $.ajax({ url: "<%= url_for(params.except(:action).merge(:action => 'show_project')) %>", dataType: 'script' })
};
$(document).ready( function(){
    $("#projectMenuButton").bind('click', projectNav);
});

# show_project.js.erb
$("#tabs-project .loadingDiv").remove();
$("#tabs-project").append('<%= escape_javascript(render :partial => "profiles/project")%>')
$("#projectMenuButton").unbind('click', projectNav);