使用流沙后，'click' 事件在 Backbone.View 中消失答案

【问题标题】：'click' event disappears in Backbone.View after using Quicksand使用流沙后，'click' 事件在 Backbone.View 中消失
【发布时间】：2012-09-08 20:24:50
【问题描述】：

模型中有一个带有事件click 的“视图”。使用 jQuery 的流沙效果插件后，对象失去了它们的事件处理程序。我已经尝试在backbone.js 中使用标准方法为事件添加监听器：

events: {
    "click .objContact"    : "openChat"
}

和jQuery一样的工具delegate:

var self=this; 
this.$el.delegate('.objContact','click', function(){
    self.openChat();
});

和live:

var self=this; 
this.$el.find('.objContact').live('click', function(){
    self.openChat();
});

但click 事件消失了。可能是什么问题呢？我该如何解决？

UPD：调用'Quicksand'是在Backbone.Router中（可能变化是直接通过jQuery获取的，不是Backbone），所以Backbone.View中不处理变化

UPD 2： 问题通过以下方式解决 - 将 click 事件的处理从 View-model 移至 View-collection。并用 live 处理（在on 无效）

【问题讨论】：

标签： javascript jquery events backbone.js quicksand

【解决方案1】：

简单的答案：而不是将函数链接到使用经典ajax方法的链接

$('a.oldJqueryClass').click(function(){....

你需要使这个函数独立，声明一个新函数

function myfunction(params) {alert(params);}

比在链接中你用老派的方式称呼它：

<a href="#" class="oldJqueryClass" onclick="javascript:myfunction('My alert message')">Click here</a>

通过这种方式，克隆的元素将包含对函数的调用，您可以忘记恢复因流沙克隆而破坏的 dom 完整性。

我在我的项目中做过，效果很好。

【讨论】：

是的，这个选项也不错。但就我而言，代码在 Chrome 的扩展程序中执行，并且禁止引入新规则“清单 2”。

【解决方案2】：

在相关的 DOM 条目发生更改或被覆盖后，调用 delegateEvents()。在传统的 Backbone 应用程序中，这通常在 render 方法中完成，但您可能需要弄清楚流沙在何时何地发挥作用（我对此一无所知），然后调用 delegateEvents 将重新激活事件用于 DOM 中的当前元素。

【讨论】：

您可能需要setElement 而不仅仅是delegateEvents，具体取决于流沙对 DOM 的作用。
在QuickSand中有这样一行var $dest = $($sourceParent).clone()。但想法（和文档）.live 是为新创建的项目创建一个事件，但没有奏效。
Clone 仅克隆一个元素，但不会将其插入 DOM AFAIK。正如 mu 所指出的，它如何插入 DOM 可能会影响事件，甚至是附加到视图本身的元素。从理论上讲，具有（假定是唯一的）id 的克隆和元素也可能是造成混淆的原因。