event.preventdefault() 在第二次渲染后不起作用答案

【问题标题】：event.preventdefault() not working after second renderevent.preventdefault() 在第二次渲染后不起作用
【发布时间】：2011-07-09 01:02:51
【问题描述】：

我正在使用 brunch 来处理骨干网，但我遇到了 event.preventdefault() 问题。它最初可以工作，但在页面更改后它会停止工作。

我有一个将参数传递给模板并据此呈现页面的视图。这个页面有多种形式，根据参数加载一个。所有表单都将 preventdefault 绑定到提交按钮，但由于某种原因，在我使用导航链接之一切换表单后，preventdefault 停止工作并且表单被发布。知道为什么会这样吗？如果您需要查看代码，请告诉我。

这是如何发生的一个例子：我点击“提交故事”导航链接并输入内容并点击提交。我收到 js 警报，但没有任何反应。现在我点击“提交诗歌”并点击提交，但这次表格被张贴了。如果我从“提交诗歌”开始，它就可以正常工作。如果我点击“提交诗歌”并在提交前点击刷新，它也可以工作。奇怪....

编辑：添加代码示例。模板根据传入的类型进行渲染。

class exports.ClientsSettingsView extends UberView
  id: 'settings_view'
  className: 'view_container'

  events:
    'submit #credit_card_form' : 'addCard'
    'submit #profile_pic_form' : 'processPicUpload'
    'submit #edit_info_form' : 'test'
    'click #delete_card' : 'deleteCard'


  render: (type="info",status=0) ->
    $('.spinner#submit').hide()
    @ReadUserInfo()
    $(@el).html clientsSettingsTemplate {type,status}
    @FadeIn()

    @

  addCard: (e) ->
    e.preventDefault()
    $el = $(e.currentTarget)  


    attrs = 
      card_number: $el.find('#card_number').val()
      card_code: $el.find('#card_code').val()
      card_expiration_month: $el.find('#card_expiration_month').val()
      card_expiration_year: $el.find('#card_expiration_year').val()


    options = 
      success: (response) ->
        alert "Added"      
      error: (e) ->
        alert "Error"

    model = new app.models.paymentprofile

    model.save attrs, options
    console.log attrs

【问题讨论】：

标签： backbone.js

【解决方案1】：

您以后如何加载其他表单和提交按钮？如果您动态地将它们拉入，您的事件可能不再附加。您可以尝试使用 jquery 的 live 方法将您的事件绑定到表单提交。

.live()

【讨论】：

似乎不起作用。这应该不是问题，因为每次加载视图时视图构造函数都会调用它。
我最初一定误读了您的问题，我用一个可能的解决方案更新了我的答案，该解决方案更符合您的解释。如果这不起作用，您应该包含一些代码 sn-ps 以提供一些关于您如何设置以及正在发生的事情的见解。
甜蜜！使用 live 解决了这个问题。我认为这是因为动态插入/替换。不知道如何让骨干自动完成......
接受答案？当其他人搜索类似问题时，它可能会有所帮助。
我接受了它，直到我意识到委托事件是 .live() 的一种特殊形式。我不确定为什么当我调用它时它不起作用，但直接与实时调用一起使用。我希望如果我再次提出问题，其他人可能会知道发生了什么。

【解决方案2】：

我遇到了同样的问题。

解决方法
就是在Backbone.View添加到DOM后手动调用delegateEvents()。

问题
我正在调用subview.remove()，它会删除所有 DOM 事件侦听器（通过 jQuery.remove）并稍后使用相同的子视图实例。

解决方案 如果视图必须保持活动状态但必须暂时隐藏，请使用 this.$el.hide() 和 this.$el.show()

在其他情况下不要重用 Backbone.View 实例，而是实例化 new 的实例。

【讨论】：