Привязать динамически добавленную форму для отправки события с помощью jQuery - PullRequest
Новая
       36

Привязать динамически добавленную форму для отправки события с помощью jQuery

0 голосов
/ 07 мая 2009

Каков наилучший способ обработки события отправки, если в jQuery динамически создаются несколько форм с одним и тем же идентификатором формы?

Пока эта строка заставляет jQuery обрабатывать только первую форму. 

$("form#noteform").submit(function(){
  // do stuff
});

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

Как сделать так, чтобы он прослушивал все отправленные сообщения, а затем определял, является ли верным идентификатором формы, запустившим отправку?

Ответы [ 8 ]

4 голосов
/ 07 мая 2009

Нет лучшего способа сделать это с помощью идентификаторов, поскольку наличие нескольких элементов с одинаковым идентификатором является недопустимым HTML.

Я бы предложил вместо ваших форм иметь уникальные идентификаторы, но с общим именем класса. Если вам необходимо получить первый, вы можете использовать идентификатор напрямую или класс и селектор jquery: first. 

$('form.className:first').submit(function(){
  stuff();
});

-edit- Попытка на самом деле решить проблему определения, какая форма была отправлена. Опять же, это решение основано на уникальных идентификаторах формы 

$('form.className').submit(function(){
  switch( $(this).attr('id') ){
    case 'form1id':
      submitForm1();
      break;
    case 'form2id':
      submitForm2();
      break;
    default:
      stuff()
      break;
  }      
});
1 голос
/ 07 мая 2009

Если вы используете динамически добавленные формы, вы должны использовать функцию live в jQuery: 

  $('.submit').live('click', function(e) {

вместо 

  $('.submit').click(function(e) {

Это связывает обратный вызов с кнопками с классом submit, даже если новые добавляются динамически.

P.S. Извините за сообщение об этом, но пояснения, которые вы добавляете в новые ответы на свой вопрос, должны быть добавлены к исходному вопросу, а не добавлены в качестве ответов. Технически они не ответы.

0 голосов
/ 08 мая 2009

Как лучше всего справиться? отправить событие, когда у вас есть несколько форм, динамически создаваемых с такой же идентификатор формы в jQuery?

Если идентификатор 'noteform', чтобы выбрать все формы с этим идентификатором: 

jQuery('form[id="noteform"]')

Внимание : Возможно, не самая лучшая идея - иметь несколько элементов HTML (включая форму) с неуникальным идентификатором.

Как вы можете заставить его слушать всех представляет?

Вы можете привязать событие к его событию: 

jQuery('form[id="noteform"]').submit(function(e){});

и позже укажите, если это правильный идентификатор формы, запустивший представить

Хотя использование селектора гарантирует (на мой взгляд) наличие формы с правильным идентификатором, вы можете проверить идентификатор формы в событии отправки, используя этот объект, например 

jQuery('form[id="noteform"]').submit(function(e){
  if(this.id=='noteform') {/* do interesting stuffs */}

  // use .index function to determine the form index from the jQuery array.
  alert('index='+jQuery('form[id="noteform"]').index(this));
});

Если вас интересует фрагмент кода POC, который я использую для проверки их (решения), вот он: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>

<script type="text/javascript" src="jquery-1.3.2.js"></script>

</head>

<body>

<form id="noteform"><div>
<input type="submit" value="submit" />
</div></form>

<form id="noteform"><div>
<input type="submit" value="submit" />
</div></form>

<form id="noteform"><div>
<input type="submit" value="submit" />
</div></form>

<script type="text/javascript">
/* <![CDATA[ */

// test for selection
jQuery('form[id="noteform"]').each(function(i){
  alert('noteform #' + i); //
});

// test for submission
jQuery('form[id="noteform"]').submit(function(e){
  if(this.id=='noteform'){
    alert('index='+jQuery('form[id="noteform"]').index(this));
    return false; // cancel submission
  }
});

/* ]]> */
</script>

</body>

</html>

Спасибо.

0 голосов
/ 07 мая 2009

Я пересмотрел пример кода создания новой заметки

Этот объект также присоединяет событие submit к вновь добавленной форме в функции обратного вызова. отключить событие загрузки.

Это шаг вперед потому что другие примеры по какой-то причине не сработали.

Я не знаю ни о каких недостатках делать это, пока! Я открыт для любых комментариев по этому вопросу Если вы хотите см. Пример

Назначение и комментарии: Функция newnote принимает два аргумента

-: index = количество заметок, уже присутствующих на странице

-: tbnoteid = примечание из базы данных

Предполагается, что индекс тоже действует как счетчик отображаемых сообщений.

Если счетчик превышает 10, например, предполагается удалить сообщение по критерию с выключенным, последним является первое сообщение (сообщение с самой старой отметкой времени) со страницы и дБ (логика тоже будет добавлена ​​позже)

Единственное действие, которое разрешено выполнять формой, - это удалить сообщение из базы данных и удалить себя (контейнер div) со страницы. В экстатических целях оно сначала исчезает.

Функция может принимать больше аргументов, таких как само сообщение. Когда пользователь заходит на страницу, функция newnote должна вызываться из другой функции, которая извлекает сообщения из БД, если таковые имеются.

Ссылка, создающая новую заметку, будет заменена действием из другой формы, например в этом примере 

$(document).ready(function(){
 $('a[name=modal]').click(function(e) {  //the selector is for testing purpose 
        //Cancel the link behavior   
        e.preventDefault();   
       var $aantal = $("div.pane").size()
    newnote($number+1,1); // second argument is supposed too come from the database


    }); 

    function newnote(index,tbnoteid) {


    $("div.wrapper:last").after('<div class="wrapper"></div>'); 
    $('.wrapper:last').load('tbnote.html .pane', function() { 
    $(".pane:last").prepend("testmessage");  //testpurpose
    $('.pane:last #frmnoteid').val(tbnoteid);

    $(this,".frm" ).attr('id' , index);
    var $id = $(this).attr('id'); ");  //testpurpose
    $('.frm:last').submit(function(){ 
        $.post("tbnotes.php",{
        noteid: $("#frmnoteid").val(),
        actie: "verwijder",
        tijd: timestamp}, function(xml) {
        addMessages(xml);
        });

     alert("Hello mijn id = " + $id );"); //testpurpose 
    $(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
    $(this).parents(".wrapper").remove();
    return false;

            });
        });

}
0 голосов
/ 07 мая 2009

Я полностью переработал свой ответ ... Он чище, проще и работает и для динамически добавляемых форм! ;-P 

<script language="javascript">
$(function() {
    $('form').live('specialSubmit',function() {
        // do stuff... the form = $(this)
        alert($(this).serialize()); // to prove it's working...
    });
    bind_same_id_forms('noteform');
});
function bind_same_id_forms(id) {
    $('form').die().live('keypress',function(ev) { 
        if(ev.keyCode == 13 && $(this).attr('id') == id) {
            $(this).trigger('specialSubmit');
            return false;
        }
    }).children(':submit,:image').die().live('click',function(ev) {
        if($(this).attr('id') == id) {
            $(this).trigger('specialSubmit'); 
            return false;
        }
    });
}
</script>

Пример HTML: 

<form id="noteform" action="question/save/1234" method="post">
   <input type="text" name="question" />
   <input type="text" name="answer" />
   <input type="submit"value="Save" />
</form>
<!-- more forms -->
<form id="noteform" action="question/save/4321" method="post">
   <input type="text" name="question" />
   <input type="text" name="answer" />
   <input type="submit" value="Save" />
</form>
0 голосов
/ 07 мая 2009

Я думаю, что столкнулся с некоторой синтаксической проблемой

У меня есть полный код здесь

кнопка имеет тип изображения 

$(document).ready(function(){
    timestamp = 0;
    $('.delete').click(function(e) {   
          // load the form with closest (jQuery v1.3+)    
         var form = $(this).closest('form');    // check form   
         if (!form.attr('id')="noteform")    {     
             e.preventDefault();    
         }    

          // or if you make the buttons of type button and not submit    
         if (form.attr('id')="noteform")   {     
        form.submit(function(){ 

        $(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
        $.post("tbnotes.php",{
             noteid: $("#frmnoteid").val(),
             action: "delete",
             time: timestamp

        }, function(xml) {
            addMessages(xml);
            });
        return false;
              });                  

        } // end off IF(form.attr('id')="noteform")

}); // заканчиваем $ ('. delete) .click (function (e) {

    //select all the a tag with name equal to modal   
    $('a[name=modal]').click(function(e) {   
        //Cancel the link behavior   
        e.preventDefault(); 
        // make a new note  
        newnote(); 

    });

}); // конец документа готов

0 голосов
/ 07 мая 2009

последний вариант, который я на самом деле думал об этом потому что я уже использовал этот код где-то еще

Если это действительно работает, то это было бы здорово

тоже проверьте, если форма действительна, я мог бы использовать вместо выключенного 

if (!isValid(form))  

if form.id="tbnoteform" then
submit the form

Я все еще пытаюсь отвлечься от этого

Можете ли вы использовать это ключевое слово каждый раз после того, как вы использовали оператор выбора тоже, создайте экземпляр объекта ?? поэтому форма теперь является экземпляром объекта вне формы?

Richard

0 голосов
/ 07 мая 2009

Я видел некоторые проблемы с событием submit. Я бы рекомендовал прикреплять ваши события к событиям нажатия кнопок для ваших форм. Я также должен порекомендовать вам не использовать те же идентификаторы в HTML, если это возможно. Это вообще плохая практика.

Например:

со следующим html: 

<form id="questionForm" action="question/save/1234" method="post">>
   <input type="text" id="question1" />
   <input type="text" id="answer1" />
   <input type="submit" id="saveQuestion1" class="submit" value="Save" />
</form>
<!-- more forms -->
<form id="questionForm" action="question/save/4321" method="post">
   <input type="text" id="question2" />
   <input type="text" id="answer2" />
   <input type="submit" id="saveQuestion2" class="submit" value="Save" />
</form>

Вы можете использовать это вместо: 

$(document).ready(function() {
  $('.submit').click(function(e) {
    // load the form with closest (jQuery v1.3+)
    var form = $(this).closest('form');
    // check form
    if (!isValid(form))
    {
      e.preventDefault();
    }
    // or if you make the buttons of type button and not submit
    if (isValid(form))
    {
      form.submit();
    }
  });
});
...