T.M. SoftStudio

feci quod potui, faciant meliora potentes

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,"");