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'

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

这是我的添加功能，其中#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

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

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

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

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

Ajax附加的对象在dom中不可见

1 个答案: