disabled на динамически созданые элементы
Есть таблица с динамическими полями.
При выборе в одном селекте (вне этой таблицы) двух вариантов - инпуты должны быть без атрибута disabled, при остальных - с ним. Эти инпуты - динамически созданные элементы таблицы при клике на кнопку. Я читал о делегации событий, но код все-равно не работает. Вот сам код:
$(document).ready(function(){
var $state = $('#eart'),
$province = $('.ind');
$state.on("change",function() {
if ($state.val() == 'EZ') {
$province.removeAttr('disabled');
}else if($state.val() == 'MUB2') {
$province.removeAttr('disabled');
} else {
$province.attr('disabled', 'disabled').val('');
}
}).trigger('change');
});
$province = $('.ind'); - решил брать класс, так как он у них общий. Скрипт работает только для первого элемента, а для других, которые создаются при клике на кнопку - нет. Что я делаю не так? |
Цитата:
$(кому делегируют).on("change", "кто делегирует", function() |
Цитата:
|
:write: похоже не нужно тут делегирования
$(document).ready(function(){
var $state = $('#eart');
$state.on("change",function() {
var $province = $('.ind');
if ($state.val() == 'EZ') {
$province.removeAttr('disabled');
}else if($state.val() == 'MUB2') {
$province.removeAttr('disabled');
} else {
$province.attr('disabled', 'disabled').val('');
}
}).trigger('change');
});
|
Спасибо, всё работает, но не так как нужно :(
Скрипт работает корректно с элементами, которые есть уже. Но если, например, сначала выбрать в селлекте любое значение кроме "EZ" или "MUB2", то у полей ввода с классом "ind" будет аттрибут "disabled", а у динамически созданных элементов нет. Как сделать так, что бы сперва можно было выбрать корректное значение в списке, и сразу после этого ставился аттрибут disabled на всех динамически созданных полях ввода с классом "ind"?:help: |
maksqwerty,
добавьте строку, там где создаёте элементы в конец
$('#eart').trigger('change');
|
Сама динамическая таблица выглядит таким образом:
var table = document.getElementById('dynamictable'),
tbody = table.getElementsByTagName('tbody')[0],
clone = tbody.rows[0].cloneNode(true);
function deleteRow(el)
{
var del = el.parentNode.parentNode.rowIndex;
table.deleteRow(del);
while (table.rows[0]){
updateRow(table.rows[del], del, false);
del++;
}
}
function insRow()
{
var new_row = updateRow(clone.cloneNode(true), ++tbody.rows.length, true);
tbody.appendChild(new_row);
}
function updateRow(row, del)
{
row.cells[0].innerHTML = del;
var inp1 = row.cells[1].getElementsByTagName('input')[0];
inp1.id = 'mat'+ del;
var inp2 = row.cells[2].getElementsByTagName('input')[0];
inp2.id = 'ind'+ del;
var inp3 = row.cells[3].getElementsByTagName('input')[0];
inp3.id = 'ben'+ del;
var inp4 = row.cells[4].getElementsByTagName('input')[0];
inp4.id = 'men'+ del;
var inp5 = row.cells[5].getElementsByTagName('input')[0];
inp5.id = 'preis'+ del;
var inp6 = row.cells[6].getElementsByTagName('input')[0];
inp6.id = 'wert'+ del;
var sel1 = row.cells[7].getElementsByTagName('select')[0];
sel1.id ='ferti'+ del;
sel1.value = document.getElementById('ferti1').value;
var inp7 = row.cells[8].getElementsByTagName('input')[0];
inp7.id = 'sap'+ del;
var sel2 =row.cells[9].getElementsByTagName('select')[0];
sel2.id ='kost'+ del;
sel2.value = document.getElementById('kost1').value;
var but1 = row.cells[10].getElementsByTagName('button')[0];
but1.id = 'deletebutton'+del;
return row;
}
И куда бы я не добавил эту строку, которую вы написали, она не работает :( |
maksqwerty,
в 23 строку |
В связи с некоторыми обстоятельствами вынужден снова поднять эту тему.
А можно делать "выборку" не по значению, а по классу? Т.е. вместо
if ($state.val() == 'EZ') {
Написать, к примеру
if ($state.attr('class') == 'EZ') {
Так как в value я вынужден использовать совершенно другие значения. |
maksqwerty,
Можно! а можно создать data-val атрибут, как вам удобнее |
| Часовой пояс GMT +3, время: 20:50. |