форма не соответствует .live () bind

Question

У меня есть форма, созданная после загрузки документа. и я пытаюсь остановить отправку с return false;, но это не мешает форме перезагрузить документ. вот мой код:

$('#name-update.updateAcct').live('submit', function(){
    var action = $(this).attr('data-action');
    console.log(action);
    switch(action){
        case "name":
            var firstName = $(this).children('input#contct_firstName').val();
            var lastName = $(this).children('input#contct_lastName').val();
            console.log(firstName+" "+lastname);
            break;
    }
    return false;
});

Я понятия не имею, почему это утверждение не останавливает форму.

Answer 1

Здесь:

console.log(firstName+" "+lastname);

lastname не существует (должно быть lastName) => выдается ошибка javascript => функция .live никогда не успевает return false => форма отправляется нормально.

Что касается извлечения этих имен, я вижу, что вы используете селекторы идентификаторов и поскольку идентификаторы в HTML должны быть уникальными, вы можете упростить свою жизнь следующим образом:

var firstName = $('#contct_firstName').val();
var lastName = $('#contct_lastName').val();

или

var firstName = $('input#contct_firstName', this).val();
var lastName = $('input#contct_lastName', this).val();

но, честно говоря, чем короче код, тем меньше вероятность ошибок.

Answer 2

Попробуйте добавить event.preventDefault(); в начало вашего наблюдателя:

$('#name-update.updateAcct').live('submit', function(event){
    event.preventDefault(); // stop default form submission
    var action = $(this).attr('data-action');
    console.log(action);
    switch(action){
        case "name":
            var firstName = $(this).children('input#contct_firstName').val();
            var lastName = $(this).children('input#contct_lastName').val();
            console.log(firstName+" "+lastName);
            break;
    }
    return false;
});