прилагаемый пролет не работает

Question

form=jQuery("<form>" 
      ,{ 
       "method":"post" 
       , 
       "action":node.get("inline-edit-target") 

      } 
      ); 


     $(node).after(form); 
     //console.log($(node).html()); 

     fieldNode=$(node).find(".inline-edit-field"); 
     console.log(fieldNode.length); 
     fieldNode.each(function(index,elem) 
     { 
      console.log($(elem).data("field-name")); 

      $(form).append("<span>").html($(elem).data("field-name")); 
      $(form).append("<input>" 
       ,{ 
        "type":"text" 
        , 
        "name":$(elem).data("field-name") 
        , 
        "value":$(elem).text() 
       });  
     } 
     ); 

Его основная проверка DOM и подготовка формы. форма правильно анализирует два поля (полеNode.length дает правильное число). Он также правильно печатает узлы, пока я не добавил тег span. Почему он не работает?

Answer 1

Проблема, если это единственная проблема, эта линия:

$(form).append("<span>").html($(elem).data("field-name")); 

И проистекает из того факта, что append() возвращает исходный элемент, к которому новый элемент был добавленным, не новый элемент сам (proof of concept).

Итак, вы добавляете span, а затем сразу переписываете HTML родительского div на то, что возвращает $(elem).data('field-name').

Кроме того, вы будете иметь проблемы с непосредственно-следующей строкой, так как JQuery не будет (или не) создать элемент, используя объект, с Append (proof of failure), вместо этого вы должны использовать строка HTML, например, в вашем случае:

$(form).append('<input type="text" name="' + $(elem).data('field-name') + '" value="' + $(elem).text() + '" />'); 

Или (и это, пожалуй, проще):

$(form).append($("<input />" ,{ 
    "type" : "text", 
    "name" : $(elem).data("field-name"), 
    "value" : $(elem).text() 
}));