элемент формы не появляется после добавления через jquery - PullRequest
Новая
       0

элемент формы не появляется после добавления через jquery

0 голосов
/ 13 мая 2010

внутри метода jquery (по событию нажатия кнопки) у меня есть следующий код: 

    $(selector).html("<form action='/Tracker/CopyFood' method='post'><input type='hidden' name='Id' value=" + id + "><input class='very-small-input' type='text' name='Quantity' value='1' /> for <select name='Date'><option value='Today'>Today</option><option value='Yesterday'>Yesterday</option></select><select name='Meal'><option value='Breakfast'>Breakfast</option><option value='Lunch'>Lunch</option><option value='Dinner'>Dinner</option><option value='Evening Snack'>Evening Snack</option></select><input type='button' class='submitCopyFood' value='Add'> or <div style='display:inline' class='CancelCopy'>Cancel</div></form> ");

кажется, что оно работает на экране, но при нажатии кнопки «submitCopyFood» событие было запущено, но оно не отправляло форму. Когда я нажимаю «Просмотреть источник выбора» в Firefox, я вижу проблему. Все, что я вижу, это: 

   <input name="Id" value="128" type="hidden"><input class="very-small-input" name="Quantity" value="1" type="text"> for <select name="Date"><option value="Today">Today</option><option value="Yesterday">Yesterday</option></select><select name="Meal"><option value="Breakfast">Breakfast</option><option value="Lunch">Lunch</option><option value="Dinner">Dinner</option><option value="Evening Snack">Evening Snack</option></select><input class="submitCopyFood" value="Add" type="button">  or <div style="display: inline;" class="CancelCopy">Cancel</div>

Как будто я нигде не добавил форму. Есть ли причина, по которой я не вижу: 

<form action='/Tracker/CopyFood' method='post'>

или 

</form>

в исходном коде внутри выбранного источника. Есть что-то особенное, что мне нужно сделать здесь?

Обновлен:

вот событие нажатия кнопки. Чтобы быть понятным, это событие срабатывает нормально, но эта строка терпит неудачу ниже: 

var myForm = parentDiv.children('form');

потому что myForm пуст (так как нет элемента формы)

Вот полное событие клика: 

$(document).ready(function() {
    $('.submitCopyFood').live('click', function() {

    debugger;

    var parentDiv = $(this).parent('.copyFoodInstance');
    var myForm = parentDiv.children('form');

    $.post(myForm.attr('action'), myForm.serialize(), function(data) {
        debugger;
        parentDiv.attr("fromInner", "1");
        parentDiv.attr("myset", "0");
        parentDiv.html("<img  BORDER=0 src='../../images/copy1.png' />");

    });
});

});

1 Ответ

2 голосов
/ 13 мая 2010

Если вы добавляете форму внутри другой формы, это недопустимо. Браузер попытается исправить код (по-разному, в зависимости от браузера), один из способов - удалить тег формы.

Если вы хотите, чтобы кнопка что-то делала при нажатии, вы должны установить для нее событие onclick. Если вы хотите, чтобы кнопка отправила форму, вы должны использовать вместо нее ввод type="submit".

Обновление:

Вы действительно действительно уверены, что нет элемента, окружающего элемент, в который вы пытаетесь добавить форму? Я могу легко воспроизвести точное поведение, поместив форму вокруг элемента, в который она добавлена. Если внешней формы нет, форма добавляется просто отлично и отображается при просмотре источника выбора.

Метод parent проходит только один уровень, поэтому переменная parentDiv - это объект jQuery с нулевыми элементами, поскольку родительский элемент кнопки - это форма. Вы можете использовать метод parents или closest, чтобы найти элемент.

Рабочий пример: 

<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="jquery-1.4.1.js"></script>

<script type="text/javascript">

$(function(){

  var id = 'asdf';
  $('.copyFoodInstance').html("<form action='/Tracker/CopyFood' method='post'><input type='hidden' name='Id' value=" + id + "><input class='very-small-input' type='text' name='Quantity' value='1' /> for <select name='Date'><option value='Today'>Today</option><option value='Yesterday'>Yesterday</option></select><select name='Meal'><option value='Breakfast'>Breakfast</option><option value='Lunch'>Lunch</option><option value='Dinner'>Dinner</option><option value='Evening Snack'>Evening Snack</option></select><input type='button' class='submitCopyFood' value='Add'> or <div style='display:inline' class='CancelCopy'>Cancel</div></form> ");

  $('.submitCopyFood').live('click', function() {

    var parentDiv = $(this).closest('.copyFoodInstance');
    var myForm = parentDiv.children('form');

    alert(parentDiv.length); // shows 1
    alert(myForm.length); // shows 1

  });

});

</script>

</head>
<body>

<div class="copyFoodInstance"></div>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...