Прошу помочь разобраться в чем моя ошибка. С текстового поля
<input type='textbox' class="tur" id='textbox1' >с помощью Ajax отправляю запрос на сервер. Сервер принимает и возвращает ответ как положено. Но если я динамически добавляю новое текстовое поле, отправка не сервер не происходит, в чем моя ошибка?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery add / remove textbox example</title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script type="text/javascript" src="js/jQuery-v1.11.3.js"></script>
</head><body>
<h1>jQuery add / remove textbox example</h1>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" class="tur" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
//Живой поиск
$('.tur').bind("change keyup input click", function() {
if(this.value.length >=2){
$.ajax({
type: 'post',
url: "UserController", //Путь к обработчику
data: {name: this.value},
response: 'text',
success: function(data){
$(".search_result").html(data).fadeIn(); //Выводим полученые данные в списке
}
})
}
})
$(".search_result").hover(function(){
$(".tur").blur(); //Убираем фокус с input
})
//При выборе результата поиска, прячем список и заносим выбранный результат в input
$(".search_result").on("click", "li", function(){
s_user = $(this).text();
$(".tur").val(s_user); //деактивируем input, если нужно
$(".search_result").fadeOut();
})
});
</script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' class="tur" id='textbox1' >
<ul class="search_result"></ul>
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
</html>
