Как кликнуть на элемент через Javascript?

Question

На странице есть select option

<select class="equipment_type" id="equipment_type">
   <option value=""></option>
   <option value="659">Иванов Иван</option>
</select>

И на странице также есть обработчик события.

$('select.equipment_type').live(($.browser.msie ? 'click' : 'change'),
            function()
            {

                var equipment_type = $(this).val();

                var html = $.ajax({
                    url: 'ajax/request-invoice.php?request_type=' + request_type + '&action=get_equipment&equipment_type=' + equipment_type + '&request_id=' + request_id,
                    async: false
                }).responseText;
                $(this).next().remove();
                $(this).after(html);
            }
        );

Я пытаюсь теперь выбрать элемент и чтобы сработало событие click

var select = document.querySelector('#equipment_type');
select.value = 659;
select.dispatchEvent(new Event('click'));

Значение выбирается корректно, но событие не генерится. Что я делаю не так?

Answer 1

В коде присутствуют .live() и $.browser, а это значит, что используется библиотека JQuery версии менее 1.9.0 или более новая версия с подключенным плагином jQuery Migrate. Это создаёт некоторые нюансы.

При назначении обработчика, условие выбирает событие change, т.к. из комментариев понятно, что просматриваете в Chromium. Но, пытаетесь инициировать событие click, которое не отслеживается в силу условия и используемого браузера.

Логично посылать событие change. К тому же, устаревшая версия библиотеки требует указания дополнительного параметра в конструкторе событий new Event(), такого как bubbles (всплытие) :

$('select.equipment_type').live(($.browser.msie ? 'click' : 'change'), function(ev) {
  var equipment_type = $(this).val();
  
  console.log('Сработало событие', ev.type);
  
  var html = $.ajax({
    url: 'ajax/request-invoice.php?request_type=' + request_type + '&action=get_equipment&equipment_type=' + equipment_type + '&request_id=' + request_id,
    async: false
  }).responseText;
  $(this).next().remove();
  $(this).after(html);
});

var select = document.querySelector('#equipment_type');
select.value = 659;
select.dispatchEvent(new Event('change', { bubbles: true }));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<select class="equipment_type" id="equipment_type">
  <option value=""></option>
  <option value="659">Иванов Иван</option>
</select>

Если используете jQuery, то будет правильнее задействовать возможности актуальных версий этой библиотеки и не мешать, без особой необходимости, с нативным JavaScript-кодом:

$('select.equipment_type').on('click change', function(ev) {
  var equipment_type = $(this).val();
  
  console.log('Сработало событие', ev.type);
  
  var html = $.ajax({
    url: 'ajax/request-invoice.php?request_type=' + request_type + '&action=get_equipment&equipment_type=' + equipment_type + '&request_id=' + request_id,
    async: false
  }).responseText;
  $(this).next().remove();
  $(this).after(html);
});

$('#equipment_type').val('659').click();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="equipment_type" id="equipment_type">
  <option value=""></option>
  <option value="659">Иванов Иван</option>
</select>

БЛОГ НА HUSL

Как кликнуть на элемент через Javascript?

Ответы (1 шт):