jquery - Ajax 附加对象在 dom 中不可见

Question

嗨，我有一个像这样的 CoffeeScript :

$(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 部分向其中添加 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

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

绑定(bind)操作将“监听”您绑定(bind)的内容(在本例中为“更改”)。

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

因此，使用作用域，JS 将“监听”该作用域内的任何更改，然后它将能够“监听”动态修改(即: $(some_main_div).find(元素))。