Получить .val() из входов на .focusout()

Question

У меня есть ряд динамически генерируемых входов с того же класса, например:

<input class="addressitem" type="text"/> 
<input class="addressitem" type="text"/> 
<input class="addressitem" type="text"/> 

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

Однако у меня возникли проблемы с поиском наилучшего способа сделать это. До сих пор я пытался:

$(".addressitem").focusout(function() { 
    var addressinput = $(this).val(); 
    console.log(addressinput); 
}); 

и

$(".addressitem").change(function() { 
    var addressinput = $(this).val(); 
    console.log(addressinput); 
}); 

Но я не могу получить что-нибудь, чтобы появиться в консоли.

Может ли кто-нибудь указать мне в правильном направлении?

Answer 1

Оба ваших подхода должны работать до тех пор, пока вы определяете их внутри события document.ready, и у вас нет других ошибок скрипта на вашей странице.

$(function(){ 

    $(".addressitem").change(function() { 
    var addressinput = $(this).val(); 
    console.log(addressinput); 
    }); 

    $(".addressitem").focusout(function() { 
    var addressinput = $(this).val(); 
    console.log(addressinput); 
    }); 

}); 

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

Также помните, что событие change происходит в текстовых полях ввода, когда фокус отсутствует. Таким образом, вы увидите консоль.log, когда пользователь меняет фокус из текстовых полей. Если вам нужны мгновенные обновления, вы должны рассмотреть возможность использования keyUp. Событие

Here - рабочий образец.

---

EDIT: В соответствии с комментарием: Я имел поле, генерируемое функцией щелчка Jquery. Мне пришлось переместить мой код в функцию щелчка, чтобы он работал.

Нет, вам не нужно. Вы можете просто использовать метод делегирования jQuery on. Когда вы регистрируете обработчик событий с помощью jQuery on, он будет работать для текущих и будущих элементов (динамически вводимых) в DOM.

Так что ваш код будет

$(function(){ 

    $(document).on("change",".addressitem",function() { 
    var addressinput = $(this).val(); 
    console.log(addressinput); 
    });  

}); 

Answer 2

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

$(document).on("blur",".addressitem",function() { 
    var addressinput = $(this).val(); 
    console.log(addressinput); 
}); 

WORKING FIDDLE

Проверьте вашу консоль