когда форма Append представить не работает

Question

Здесь я создал две формы: http://jsfiddle.net/sxGtM/4729/ при отправке формы ... изменение данных в формате JSON

$(document).ready(function(){ 
$("#test").append("<form action='' method='post'> <br>"); 
$("#test").append("test <input type='radio' name='test' value='test'> <br>"); 
$("#test").append("<input type='submit'> <br>"); 
$("#test").append("</form>"); 
}); 

Первый создан в HTML и она работает хорошо, но второй создается в javascript с добавлением и когда вы отправляете форму ... ничего не делает

Не могли бы вы посмотреть мой код и написать мне правильный код?

Answer 1

Проблема с вашим кодом - append добавляет элемент формы в целом, а остальные элементы добавляются после элемента формы. ваша итоговая структура html - это что-то вроде этого.

<p id="test"> 
    <form action="" method="post"> <br> 
    </form> 
     test <input type="radio" name="test" value="test"> <br> 
     <input type="submit"> <br> 
</p> 

Поэтому используйте метод .html() для установки содержимого html в целом, как показано ниже.

$(document).ready(function(){ 
    $("#test").html("<form action='' method='post'> <br> test <input type='radio' name='test' value='test'> <br> <input type='submit'> <br></form>"); 
}); 

еще одна вещь заключается в том, что submit не будет привязываться к динамически созданным элементам. Поэтому используйте делегаты .on().

Код:

$('body').on('submit','form',function() { 
     data = JSON.stringify($(this).serializeObject()); 
     $('#json').append(data); 
     return false; 
}); 

Fiddle

Answer 2

у вас есть несколько вещей неправильно ...

во-первых, HTML добавляемыми должна быть полной - путем добавления открытия и закрытия формы теги отдельно dom будет рассматривать текст. вам следует, вероятно, рассмотреть возможность добавления всей формы сразу или создания ее как отдельного элемента.

Во-вторых, вы добавляете форму после того, как вы связали метод отправки - вам нужно будет привязать метод отправки после того, как форма была добавлена ​​в dom - снова есть много способов, которыми вы могли бы это сделать но простой способ - это функция, которую вы можете вызвать, чтобы связать вашу форму.

см:

http://jsfiddle.net/w5anU/1/

$.fn.serializeObject = function(){ 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name] !== undefined) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 
    return o; 
}; 

$(function() { 
bindForms(); 
}); 

function bindForms() { 
     $('form').submit(function() { 
     data = JSON.stringify($('form').serializeObject()); 
     $('#json').append(data); 
     return false; 
    }); 
} 

$(document).ready(function(){ 
$("#test").append("<form action='' method='post'> <br>test <input type='radio' name='test' value='test'> <br><input type='submit'> <br></form>"); 
bindForms();  
}); 

Answer 3

Это потому, что следующая команда:

$("#test").append("<form action='' method='post'> <br>"); 

также сразу добавить закрывающий тег.

вы должны создать тег, добавить его в #test, а затем добавить все остальные элементы в элемент. (не к элементу #test)