Ajax 附加对象在 dom 中不可见

Question

您好，我有一个这样的咖啡脚本：

$(document).on 'change', '#add_skill_form', ->
  skill_name = $('#character_skill_of_objects option:selected').text()
  if $('#skill_' + skill_name).length == 0 
    $.ajax
      url: 'on_add_skill'
      type: 'GET'
      dataType: 'script'
      data: {
        skill_id: $('#character_skill_of_objects option:selected').val()
      }
  else 
    alert 'Skill already in use'

在我看来，我生成了一些静态技能，对他们来说，这种验证效果很好。但是当动态添加新对象时，验证对他不起作用。

这是我的 add 函数，其中 #skill_list 是一个ul，add_skill partial 向其中添加 li 对象：

'<%= form_for [current_user, @character] do |f| %>'
  $('#skill_list').append("<%= j render partial: 'add_skill', locals: { character: @character, skill: @skill, f: f } %> ");
'<% end %>' 

我假设 DOM 在创建新对象后不会重新加载。

Answer 1

这似乎是一个范围问题。由于新对象是动态添加的，因此您必须小心绑定范围。

绑定操作将“监听”您已绑定的内容（在本例中为“更改”）。

但是由于您试图自己查找元素（即：$(element)），JS 将尝试在“静态 DOM”中找到它（我的意思是，它不会关心 DOM 修改页面首次加载后发生）。

因此，使用范围，JS 将“侦听”此范围内的任何更改，然后它就能够“侦听”动态修改（即：$(some_main_div).find(element)）。