JQuery Append удаляет символы в IE и Edge
Используя JQuery, когда я перебираю массив и добавляю значения в UL, он отлично работает в Chrome и Firefox. В IE и Edge он усекает значение, если оно начинается с числа, за которым следует тире или подчеркивание.
var listItems = $('#list1');
var result = ['1-2-3', '1_2_3', 'a-b-c', 'a_b_c'];
$.each(result, function(key, value) {
listItems.append($('<li/>', {
value: value,
text: value
}))
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id = "list1"></ul>Ожидаемый результат:
<ul>
<li value = "1-2-3">1-2-3</li>
<li value = "1_2_3">1_2_3</li>
<li value = "a-b-c">a-b-c</li>
<li value = "a_b_c">a_b_c</li>
</ul>
Фактический результат:
<ul>
<li value = "1">1-2-3</li>
<li value = "1">1_2_3</li>
<li value = "a-b-c">a-b-c</li>
<li value = "a_b_c">a_b_c</li>
</ul>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Не используйте value. Согласно Технические характеристики, значение элемента li должно быть целым числом:
The
valueattribute, if present, must be a valid integer. It is used to determine the ordinal value of the list item, when theli's list owner is anolelement.
IE и Edge обеспечивают соблюдение этого требования, извлекая целочисленный префикс из значений; они оставляют значение в покое, только если оно не начинается с целого числа.
Если вам нужно прикрепить пользовательские данные к элементу, используйте атрибуты data-XXX, которые можно установить в jQuery с помощью свойства data: при создании элемента, и вы можете получить и обновить с помощью метода .data().
var listItems = $('#list1');
var result = ['1-2-3', '1_2_3', 'a-b-c', 'a_b_c'];
$.each(result, function(key, value) {
listItems.append($('<li/>', {
data: {
value: value
},
text: value
}))
});
$("li").click(function() {
alert($(this).data("value"));
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id = "list1"></ul>К вашему сведению, я добавил атрибут data-value в LI вместо использования jQuery.data().
$.each(result, function (key, value) {
listItems.append($('<li/>', {
text: value
}).attr("data-value", value))
}
);
Спасибо еще раз за вашу помощь!
Мы оба чему-то научились из этого, я не знал об этом специальном использовании атрибута.