Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.01.2018, 16:45
Аспирант
Отправить личное сообщение для maksqwerty Посмотреть профиль Найти все сообщения от maksqwerty
 
Регистрация: 03.11.2017
Сообщений: 58

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'); - решил брать класс, так как он у них общий.
Скрипт работает только для первого элемента, а для других, которые создаются при клике на кнопку - нет.
Что я делаю не так?
Ответить с цитированием
  #2 (permalink)  
Старый 09.01.2018, 16:51
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от maksqwerty
$state.on("change",function()
Это не делегирование, делегирование, это

$(кому делегируют).on("change", "кто делегирует", function()
Ответить с цитированием
  #3 (permalink)  
Старый 09.01.2018, 16:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от maksqwerty
Я читал о делегации событий,
почему не использовали делегирование, если читали? форум полон примеров, можно и документацию прочесть
Ответить с цитированием
  #4 (permalink)  
Старый 09.01.2018, 17:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

похоже не нужно тут делегирования
$(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');
});
Ответить с цитированием
  #5 (permalink)  
Старый 16.01.2018, 13:15
Аспирант
Отправить личное сообщение для maksqwerty Посмотреть профиль Найти все сообщения от maksqwerty
 
Регистрация: 03.11.2017
Сообщений: 58

Спасибо, всё работает, но не так как нужно
Скрипт работает корректно с элементами, которые есть уже.
Но если, например, сначала выбрать в селлекте любое значение кроме "EZ" или "MUB2", то у полей ввода с классом "ind" будет аттрибут "disabled", а у динамически созданных элементов нет.
Как сделать так, что бы сперва можно было выбрать корректное значение в списке, и сразу после этого ставился аттрибут disabled на всех динамически созданных полях ввода с классом "ind"?
Ответить с цитированием
  #6 (permalink)  
Старый 16.01.2018, 13:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

maksqwerty,
добавьте строку, там где создаёте элементы в конец
$('#eart').trigger('change');
Ответить с цитированием
  #7 (permalink)  
Старый 16.01.2018, 15:27
Аспирант
Отправить личное сообщение для maksqwerty Посмотреть профиль Найти все сообщения от maksqwerty
 
Регистрация: 03.11.2017
Сообщений: 58

Сама динамическая таблица выглядит таким образом:
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;
}

И куда бы я не добавил эту строку, которую вы написали, она не работает
Ответить с цитированием
  #8 (permalink)  
Старый 16.01.2018, 15:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

maksqwerty,
в 23 строку
Ответить с цитированием
  #9 (permalink)  
Старый 01.02.2018, 18:06
Аспирант
Отправить личное сообщение для maksqwerty Посмотреть профиль Найти все сообщения от maksqwerty
 
Регистрация: 03.11.2017
Сообщений: 58

В связи с некоторыми обстоятельствами вынужден снова поднять эту тему.
А можно делать "выборку" не по значению, а по классу?
Т.е. вместо
if ($state.val() == 'EZ') {

Написать, к примеру
if ($state.attr('class') == 'EZ') {

Так как в value я вынужден использовать совершенно другие значения.
Ответить с цитированием
  #10 (permalink)  
Старый 01.02.2018, 18:32
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

maksqwerty,
Можно! а можно создать data-val атрибут, как вам удобнее
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Событие each на динамически созданные элементы Янковиц Элементы интерфейса 6 27.12.2017 18:06
Галерея на Jquery не понимает динамически добавленные элементы ice99 jQuery 8 10.11.2017 12:35
jquery-ui, knockout, динамически добавляемые элементы tarwirdur jQuery 4 26.08.2014 20:47
динамически созданные элементы не показываются в Iframe namename1 Events/DOM/Window 1 26.12.2013 02:11
Событие на динамически созданные элементы списка Arigato Events/DOM/Window 7 12.12.2011 09:28