jQuery: форма, возвращаемая при «успехе», нуждается в повторной привязке

Question

быстрый вопрос. Я использую плагин jQuery.forms.js.

У меня есть форма, которая отправляет на страницу php и возвращает данные с помощью jSon.

Возвращаемые данные являются кодом для новой формы (она заменяет форму, которая использовалась для публикации информации). Новая форма не привязана ни к каким функциям jQuery, так как ее не было при загрузке страницы.

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

// jQuery for submitting info to php doc and, on success, replacing the form 
$(document).ready(function() { 
    jQuery('form[id*=postOnline]').ajaxForm({ 
        dataType: 'json',
        success: function(data) { 
            $('#onlineStatus' + data.rid).html(data.formed).slideDown('slow');
            bindNote(); 
         } 
    });
});

<!-- /////////////////////// POST ONLINE /////////////////////// -->

<div id='onlineStatus<?php echo $b_id ?>' class='postOnline'>
  <form name="postOnline"  id="postOnline<?php echo $b_id ?>" action="postOnline.php" method="post">
    <input type="hidden" value="<?php echo $b_id ?>" name="b" />
    <input type="hidden" value="1" name="p" />
    <input type="submit" class="button"  value="Post Online" />
  </form>           
</div>

<!-- /////////////////////// POST ONLINE /////////////////////// -->


// ... code for entering data into database and then...
$result = mysql_query( $sql );
if($result) {
if($show == '1'){$val = 'remove from online'; $num='0';}
if($show == '0'){$val = 'show online'; $num='1';}

$return = "
<form name='postOnline'  id='postOnline$id' action='postOnline.php' method='post'>
<input type='hidden' value='$b_id' name='b' />
<input type='hidden' value='$num' name='p' />
<input type='submit' class='button'  value='$val' />
</form> 
";
    print json_encode(array("rid" => $id, "formed" => $return));
}
?>

Answer 1

Самое простое решение для этого - не использовать плагин формы jQuery и делать это вручную, что на самом деле не очень сложно:

$(document).ready(function() { 
    jQuery('form[id*=postOnline]').live('submit', function() {
        var formdata = $(this).serialize();
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            dataType: 'json',
            data: formdata,
            success: function(data) { 
                $('#onlineStatus' + data.rid).html(data.formed).slideDown('slow');
                bindNote(); 
            }
        });
        return false;
    });
});

Теперь, так как вы используете новую функциональность jQuery (1.3) live, любые добавляемые вами формы, соответствующие селектору form[id*=postOnline], все равно будут связаны с этим событием.

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

function bindForm() {
    jQuery('form[id*=postOnline]').ajaxForm({ 
        dataType: 'json',
        success: function(data) { 
            $('#onlineStatus' + data.rid).html(data.formed).slideDown('slow');
            bindNote();
            bindForm();
        } 
    });
}

$(document).ready(function() { 
    bindForm();
});

Не думаю, что это очень аккуратно, но это должно сработать.

Answer 2

Вам необходимо перепривязать обработчики событий после вызова ajax. Я слышал о новой функции в новой версии jquery под названием live events , которая сделает это ненужным.

Answer 3

Если по какой-либо причине вы застряли с версией jQuery до 1.3, используйте плагин " livequery ".