javascript - 当使用 AJAX 创建元素时，如何以不显眼的方式将函数绑定(bind)到元素的单击

Question

我的应用程序中有一个嵌套表单，它使用 AJAX 加载额外的字段集。其中一个字段是文件上传，我想将其隐藏并有效地替换为用于粘贴 Youtube 链接的文本字段。它适用于第一组字段，但是由于该函数绑定(bind)在 document.ready 上，因此它不适用于新的 AJAX 字段。我需要以其他方式绑定(bind)它。做什么？

$ ->
  $(".foo").click ->
    $(this).css "display", "none"

更新:我运气不好，所以我去读了 jQuery .on() documentation ，这让我想起 Fresheyeball 所说的将其绑定(bind)到父 div 上。之后，它完美地工作了。感谢您的宝贵建议!

$ ->
  $("#create").on "click", ".foo", ->
    $(this).css display : "none"

Answer 1

新的 jQuery .on 应该适合您:

$(document).ready ->
   $(window).on 'click', '.multiswitchr', ->
      that = $(this)
      that.css display : 'none'
      that.closest(".fields").find(".f-upload").first().css          display : "none"
      that.closest(".fields").find(".attachment-holder").first().css display : "none"
      that.closest(".fields").find(".youtube-link").first().css      display : "inline"

其工作方式是将监听器绑定(bind)到 window(或者您可以使用直接父级)来监听 .multiswitchr 的存在并绑定(bind) >'click' 事件。

附注在 CoffeeScript 中，文档就绪的简写就是 $ ->