Ajax hängten Objekte nicht sichtbar in der dom

Question

Hallo ich habe ein Coffeescript wie folgt aus:

$(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' 

Innerhalb meiner Sicht Ich habe einige statische Fähigkeiten erzeugt, und für sie diese Validierung funktioniert gut. Wenn jedoch ein neues Objekt dynamisch hinzugefügt wird, funktioniert die Validierung nicht für ihn.

Dies ist meine Add-Funktion, wo #skill_list ist ein ul und add_skill Teil fügt li Objekte hinzu:

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

Ich gehe davon aus, dass die DOM nicht neu geladen, nachdem neues Objekt erstellt wird.

Answer 1

Dies scheint ein Problem Umfang zu sein. Da neue Objekte dynamisch hinzugefügt werden, müssen Sie mit Ihrem Bindungsbereich vorsichtig sein.

Die Bindungsaktionen "hören" auf das, was Sie gebunden haben (in diesem Fall die "Änderung").

ABER da Sie versuchen, das Element selbst zu finden (zB: $(element)), wird das JS versuchen, es im "statischen DOM" zu finden (ich meine, es wird sich nicht um die DOM-Modifikationen kümmern nachdem die Seite zuerst geladen wurde).

Also, mit einem Bereich, der "JS" wird auf jede Änderung in diesem Bereich "zuhören", und dann kann es auf die dynamische Änderung "hören" (d. H. $(some_main_div).find(element)).