JQuery onchange для нескольких элементов, но триггер только один раз

У меня есть много полей выбора на HTML-странице, и я использовал одно и то же имя класса 'paperGSM' для всех элементов выбора и функцию, которая запускает при изменении элементов окна выбора стоимость.JQuery onchange для нескольких элементов, но триггер только один раз

var getPaperTypeFromGSM = function() 
{ 
    $('div').off().on('change', '.paperGSM', function() 
    { 
     console.log($(this).val()); 
     var url = 'api/getPaperTypeFromGSM'; 
     var postData = { 
      paperGSM: $(this).val() 
     }; 
     var $current = $(this); 
     $.post(url, postData, function (result) 
     { 
      if (result.result == 1) { 
       var output = ""; 
       output += '<option value="0">Select Paper Type</option>'; 
       for (var i = 0; i <result.paperType.length; i++) { 
        output += '<option value="' + result.paperType[i].paper_type_id + '">' + result.paperType[i].paper_type_name + '</option>'; 
       } 
       $current.siblings('.paperType').prop("disabled", false).html(output); 
       getPaperSizeFromPaperType(); 
      } else { 
       Result.error(result); 
      } 
     }, 'json'); 
    }); 
    return false; 
};

Каждый раз, когда событие происходит изменение это вызывает несколько раз (может быть, это вызывает для всех элементов с одинаковым именем класса). Ниже приведено изображение ситуации.

PS: Моя логика и даже функция пост работает прекрасный

Как я не хочу, чтобы жёстко события для всех элементов (как дать все элементы другое имя класса и жёстко функции для всех), I только одна функция работает для всех тех же элементов класса, но запускает ее только один раз.

Если я игнорирую множественные триггеры, все работает нормально, это просто то, что меня очень беспокоит.

источник

2016-08-01 Vaibhav Sidapara

Держу пари, это потому, что onChange запускается каждый раз, когда вы нажимаете кнопку. Ввод 12345 триггеров 5 onChange события – Jay

Я думаю, причина связана с 'eventBubbling'. Чтобы остановить попытку этого '$ ('div'). Off(). On ('change', '.paperGSM', function (event) {event.stopPropagation(); // и остальная часть ваших кодов..' –

эй @The_ehT, эта вещь работала, но событие не запускается для следующих блоков выбора. Поскольку я хочу одну функцию для нескольких блоков выбора, но она должна запускаться только один раз. –

Причина обусловлена eventBubbling. Чтобы остановить попробовать этот

$('div').on('change', '.paperGSM', function (event){ 
event.stopPropagation(); 
// ...and rest of your codes.. 
}

NB: Удалите .off, как он будет удалить слушателя, как только это событие.

источник

2016-08-01 07:20:55

Если кто-то еще нуждается в этом, я нашел обходной путь это с помощью onchange event и JQuery:

// The input: 
<input class="jscolor" onchange="set_boxes_color(this.jscolor)" value="cc66ff"> 

// The function: 
function set_boxes_color(picker) { 
    var elements = $(".p_box"); 
    for (var i = 0; i < elements.length; i++) { 
     elements[i].style.backgroundColor = '#' + picker; 
    } 
}

Это изменит цвет фона для всех элементов с классом p_box

источник

2016-11-02 17:46:48

JQuery onchange для нескольких элементов, но триггер только один раз

ответ

Смежные вопросы