Изменение события срабатывает обработчик jquery, но не обработчик javascript

Я вижу странное поведение, которое при использовании addEventListener, обработчика событий не срабатывает при выборе с помощью display: none;. С другой стороны, когда я использую jQuery, он срабатывает. Какой трюк позволяет jQuery сделать это и как заставить его работать в простом JavaScript?Изменение события срабатывает обработчик jquery, но не обработчик javascript

Вот код, который показывает пример.

// This doesn't work 
 
document.getElementById("notDisplayedSelect").addEventListener("change", function(e) { 
 
    $("#output").text("When select is hidden events still fire: new value = " + $(this).val()); 
 
}); 
 

 
/* 
 
// This works 
 
$("#notDisplayedSelect").change(function (e) { 
 
    $("#output").text("When select is hidden events still fire: new value = "+ $(this).val()); 
 
}); 
 
*/ 
 

 
$("#setValue").click(function() { 
 
    $("#notDisplayedSelect").val("3").trigger("change"); 
 
});

#notDisplayedSelect { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<select id="notDisplayedSelect"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
</select> 
 
<span id="output">I show selected value</span> 
 
<button id="setValue">Select third option in the hidden select</button>

источник

2015-05-22 Shalom Aleichem

Как вы можете изменить то, что не видно? – Barmar

Вы можете использовать 'select' под капотом, показывая более сложный пользовательский элемент управления. Хороший пример: https://jqueryui.com/autocomplete/#combobox –

Это фактически не имеет ничего общего с тем, что элемент select скрыт. Если вы удалите «display: none» из jsFiddle, вы не заметите разницы. Проблема заключается в том, как вы стреляете по этому событию, как это упомянуто ниже. Проверьте, как правильно запустить событие: http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript – Vince

От JQuery trigger() документы

Любые обработчики событий с приложением .on() или один из его методов быстрого доступа срабатывает, когда происходит соответствующее событие.

Когда вы

$("#notDisplayedSelect").val("3").trigger("change");

только обработчики, присоединенные с on() или change() будет срабатывать.

Видимо, это не включает в себя обработчики, присоединенные с родной

addEventListener("change", function (e) {...});

Если вы хотите, чтобы вызвать обработчик, придаваемое родной JavaScript, вы можете сделать

var event = new CustomEvent("change"); 
document.getElementById("notDisplayedSelect").dispatchEvent(event);

Update Обходной путь выше в IE

var event = document.createEvent("HTMLEvents"); 
event.initEvent("change", true, true); 
document.getElementById("notDisplayedSelect").dispatchEvent(event);

DEMO

См How to trigger event in JavaScript?

источник

2015-05-22 22:57:35 AmmarCSE

Спасибо за ответ. Я должен был настроить его, чтобы он работал в IE, хотя (CustomEvent там не работает) –

@ShalomAleichem, вместо этого вы использовали document.CreateEvent? Дайте мне знать, чтобы я мог обновить свой ответ. Благодаря! :) – AmmarCSE

Да, я использовал 'document.createEvent (« HTMLEvents »)', см. Раздел «Решение» моего вопроса. –

При добавлении обработчика с помощью JQuery, JQuery хранит информацию об этом обработчике в своей внутренней памяти, в дополнение к добавлению его в качестве слушателя событий браузера. Затем, когда вы вызываете trigger("change"), он просто вызывает эти обработчики сам, а не просматривает браузер.

В браузере нет смысла изменять невидимый элемент, так как событие change связано с взаимодействием с пользователем.

источник

2015-05-22 22:58:32 Barmar

Изменение события срабатывает обработчик jquery, но не обработчик javascript

ответ

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