I am having this problem when using plain Javascript mixed with jQuery(two different libraries I am using). So for a text input field, the plain Javascript library rely on the change event binding added using addEventListener method. The other jQuery Plugin(datetimepicker) is used to change the field and a jQuery.change() method is triggered after the value is updated.
The problem is, the listener is not triggered by the jQuery event. Here is some simple code to illustrate the issue.
<!DOCTYPE html>
<html>
<body>
<input id="abc">abc abc.</input>
<script src="//ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
document.getElementById('abc').addEventListener("change", function(){
alert('change event triggered');
});
$('#abc').change();
</script>
</body>
</html>
Given the very simple html page like this, the event listener actually will not be triggered by the jQuery.change() method, so the alert box will not be displayed. If I change the input field manually, the event works fine.
Follow up: If use jQuery for event binding and triggering, there is no problem. The problem is, I am using one library that is written in plain Javascript(JSONEditor[]), and the event binding is added using the Javascript API, and other libraries I am using changed some input field and triggered the event with jQuery, and the event is not captured.
I am having this problem when using plain Javascript mixed with jQuery(two different libraries I am using). So for a text input field, the plain Javascript library rely on the change event binding added using addEventListener method. The other jQuery Plugin(datetimepicker) is used to change the field and a jQuery.change() method is triggered after the value is updated.
The problem is, the listener is not triggered by the jQuery event. Here is some simple code to illustrate the issue.
<!DOCTYPE html>
<html>
<body>
<input id="abc">abc abc.</input>
<script src="//ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
document.getElementById('abc').addEventListener("change", function(){
alert('change event triggered');
});
$('#abc').change();
</script>
</body>
</html>
Given the very simple html page like this, the event listener actually will not be triggered by the jQuery.change() method, so the alert box will not be displayed. If I change the input field manually, the event works fine.
Follow up: If use jQuery for event binding and triggering, there is no problem. The problem is, I am using one library that is written in plain Javascript(JSONEditor[https://github./jdorn/json-editor]), and the event binding is added using the Javascript API, and other libraries I am using changed some input field and triggered the event with jQuery, and the event is not captured.
Share Improve this question edited Dec 3, 2014 at 9:19 Jason Huang asked Dec 2, 2014 at 6:14 Jason HuangJason Huang 1311 silver badge7 bronze badges 5- 1 javascript isn't a library. jQuery is a javascript library. – Md Ashaduzzaman Commented Dec 2, 2014 at 6:18
- why can't you use jQuery event handlers – Arun P Johny Commented Dec 2, 2014 at 6:19
- this code works fine without jquery. fiddle jsfiddle/qw2z22m9 – Aditya Commented Dec 2, 2014 at 6:20
- I am using two different Libraries, one is written in plain javascript without dependencies, other is written jQuery syntax. They do not interact via change event well. – Jason Huang Commented Dec 3, 2014 at 9:20
- Thanks, @Aditya, the event listener will capture the event when I change the field manually, but jQuery triggered event is not captured though, that is my question. – Jason Huang Commented Dec 3, 2014 at 9:21
3 Answers
Reset to default 2Yes, jQuery.change() (and jQuery.trigger()) does not trigger listeners added with addEventListener.
This is currently a WONTFIX for jQuery (see closed issues #2476, #3347) (source)
My workaround:
Replace
$('#abc').change(); // or $('#abc').trigger('change');
with this:
$('#abc')[0].dispatchEvent(new Event('change'));
First you pull out the native DOM element from jQuery element (`$('#abc'][0] (source)) and then dispatch your event. This way dispatched event will be handled by native and jQuery listeners. See demo.
use trigger() in jquery
$('#abc').on("change", function(){
alert('change event triggered');
}).trigger("change");
Try wrapping jquery code inside document.ready() and use simple jquery event handler for this purpose as shown :-
<script>
$(document).ready(function(){
$('#abc').on('change',function(){
alert("here");
}).change(); // trigger `.change()` event on page load.
});
</script>
Or if you are generating HTML dynamically with Jquery,then try event delegation :-
<script>
$(document).ready(function(){
$(document.body).on('change','#abc',function(){
alert("here");
}).change(); // trigger `.change()` event on page load.
});
</script>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745043190a4607934.html
评论列表（0条）