JQuery не может получить значение динамически добавляемых полей

Question

У меня есть скрытый DIV с помощью простой формы:

<div id="mb_clookup" style="display: none;"> 
    <strong><font color="#0066CC">Search for existing customers</font></strong><br /><br /> 
    <font color="#FFF"> 
     Postcode: <input type="text" name="cl_zipcode" id="cl_zipcode" /> 
     <span id="cl_search">Search</span> 
    </font> 
</div> 

Это отображается, когда пользователь нажимает кнопку на странице. Пользователь вводит почтовый индекс, нажимает на поиск и вызывается запрос JSON. Мне удалось заставить кнопку «Поиск» работать с .live(), но я не могу получить значение поля ввода. Вот код:

$(document).ready(function(){ 
    $(document).on("click", "#cl_search", function() { 
     var pc = $('#cl_zipcode').val(); 

     if(pc === '') { 
      alert('Please type in a post code first.'); 
     } 
     else { 
      // JSON 
     } 
    }); 
}); 

Переменная Th pc появляется пустой. Я попробовал: $(this).find('#cl_zipcode').val() это не определено. Просьба сообщить.

Answer 1

Что касается $(this).find('#cl_zipcode').val() входных элементов является рядом нажатая диапазона, так что ваша находка будет искать с размаху на вниз (и он не содержит ничего кроме текста).

Перед тем, как найти его, вам нужно сначала подняться по DOM.

$(this).parent().find('#cl_zipcode').val() 

Пожалуйста, обратите внимание, что идентификаторы являются уникальными, так что ваш исходный код на самом деле штраф (до тех пор, пока у вас есть только один из них добавил): http://jsfiddle.net/TrueBlueAussie/djqfharu/

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

например

$(document).ready(function(){ 
    $(document).on("click", ".cl_search", function() { 
     var pc = $(this).parent().find('.cl_zipcode').val() 
     if(pc === '') { 
      alert('Please type in a post code first.'); 
     } 
     else { 
      // JSON 
     } 
    }); 
}); 

Это потому, что браузер хранит словарь быстрого поиска, идентификаторов против элементов DOM, так что только одна запись сохраняется в ID. Результатом этого является то, что jQuery может только найти первый соответствующий элемент для поиска дублированного идентификатора. Решение состоит в том, чтобы переключиться на использование классов и поиск по классам.

Я настоятельно рекомендую вам оставить остальную часть вашего кода, поскольку указанная часть не является проблемой в изоляции.

Answer 2

i вещь ваш html-код неправильный. Becouse тега не используется тег тега не поддерживает HTML5 ..

изменения этой

<div id="mb_clookup" style="display:block;"> 
    <strong><font color="#0066CC">Search for existing customers</font></strong><br /><br /> 
    <span style="color="#FFF"> 
     Postcode: <input type="text" name="cl_zipcode" id="cl_zipcode" /> 
     <span id="cl_search">Search</span> 
    </span> 
</div> 

удачи

Answer 3

Вашего код работает нормально я проверил его в jsfiddle удаления показа ни атрибута.Вы можете проверить это here

HTML

<div id="mb_clookup"> 
    <strong><font color="#0066CC">Search for existing customers</font></strong><br /><br /> 
    <font color="#FFF"> 
    Postcode: <input type="text" name="cl_zipcode" id="cl_zipcode" /> 
     <button id="cl_search">Search</button> 
    </font> 
</div> 

JS

$(document).ready(function(){ 
    $(document).on("click", "#cl_search", function() { 
     var pc = $('#cl_zipcode').val(); 
     if(pc === '') { 
      alert('Please type in a post code first.'); 
     } 
     else { 
      alert(pc); 
     } 
    }); 
}); 

Answer 4

Вы можете использовать следующие

var pc= $("#mb_clookup").find('#cl_zipcode').val(); 

или

var pc= $("#mb_clookup :input").val(); 

проверка fiddle