在javascript中调用命名函数两次答案

【问题标题】：Calling a named function in javascript twice在javascript中调用命名函数两次
【发布时间】：2013-11-06 12:22:40
【问题描述】：

我有一个函数可以通过 AJAX 将数据加载到 div 中，具体取决于选择的值。选择可以加载预定值...或更改。

我需要在 DOM 准备好并且用户更改选择时运行该函数。如果我只包含一个或另一个，则对 get_data() 的每个调用都有效……但如果我将两个调用都留在代码中……第二个将不起作用。

  jQuery ->

    f_lesson      = $("#flight_flightlesson_id")
    gi_container  = $("#gradable_items_container")
    load_box      = $("#load_box")
    lesson_tell   = $("#load_box #gradable_items")
    scenario_tell = $("#load_box #scenarios")

    get_data = ->
      if $('#flight_flightlesson_id option[value]:selected').text() == ''
        gi_container.text("You must select a lesson in the 'Flight Info' Tab")
        scenario_tell.text("")
        load_box.removeClass("is-fetching")
        lesson_tell.text "No Lesson Selected"

      else

        $.ajax
          url: "gradable_items_inputs?lesson=#{ f_lesson.val() }"

          beforeSend: ->
            load_box.addClass("is-fetching")
            lesson_tell.text("...loading gradable items")
            scenario_tell.text("...loading scenarios")

          success: (data) ->
            gi_container.html(data).find("#ajax_gradable_items_for_lesson_content")

          complete: ->
            lesson_tell.text("")
            scenario_tell.text("")
            load_box.removeClass("is-fetching")

          error: ->
            lesson_tell.text "ERROR"

  # get_data()

    f_lesson.on "change", ->
      get_data()

对 get_data() 的第一次调用在 DOM 加载时起作用……但是，on change 调用不起作用。如果我注释掉对 get_data 的第一次调用，则 on change 调用有效。

为什么它们都不工作？我的代码有错误吗？我的执行有缺陷？

【问题讨论】：

看起来你正在get_data() 处理器中重写DOM。那么如何使用事件委托呢？
我的代码实际上是通过 AJAX 加载数据。但是，回调只对第一个调用 get_data() 起作用。
事件委托在这里有什么帮助？我只有一个带有更改事件的元素 (#flight_flightlesson_id)。
这个元素是否被$("#gradable_items_container").html(data)覆盖了？
是的，$("#gradable_items_container").html，将被更新的内容所取代。

标签： javascript ajax coffeescript

【解决方案1】：

它看起来像一个缩进问题。 f_lesson.on... 似乎比 get_data 更深一层，因此通过注释或取消注释 get_data 您将 f_lesson... 从 jQuery() 块内部移动到顶层。

我认为您的意思是将 get_data() 调用缩进更深一层。

【讨论】：