JQuery: Какие символы можно использовать для HTML-идентификатора при динамическом создании элементов
Такие символы как «.», «,», «/», «\», «)», «(», « », «:», «;», «=», «?», «-» нельзя использовать в строке идентификатора HTML-элемента, который создается динамически JQuery-кодом.
Создадим простую тестовую страницу:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-1.7.2.min.js" charset="UTF-8"></script>
<title>Insert title here</title>
</head>
<body>
<input id="text" type="text" size="30"/>
<input id="btn" type="button" value="Button"/>
<div></div>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
var id=$('input[type="text"]').val();
$('div').empty();
$('div').append('<input type="button" value="ButtonTest" id="'+id+'"/>');
$('#'+id).click(function() {
alert('test');
});
});
});
</script>
</body>
</html>
Здесь на странице отображается поле и кнопка.
При вводе текста в поле и нажатии кнопки, на страницу добавляется новая кнопка с идентификатором, полученным из введенного текста поля. Если идентификатор новой кнопки валиден, при клике на новой кнопке появляется сообщение.
Можно увидеть, что при вводе строки, включающей в себя символы «.», «,», «/», «\», «)», «(», « », «:», «;», «=», «?», «-» сообщение не появляется. Поэтому данные символы необходимо исключать из строки идентификатора. Для этого можно поставить фильтр:
id=id.replace(/[\.,\:,\/, ,\(,\),=,?,-]/g,"");
