How to get mouse events in JQuery? [duplicate] - javascript

This question already has answers here:
How to catch dragend event in JavaScript?
(2 answers)
Closed 3 years ago.
In a div, you can have onClick, onDragStart, onDragEnd mouse events.
How to get onDragEnd mouse events using JQuery?

That's pretty common event.
$(document).ready( function() {
var $draggable = $('.draggable').draggabilly();
$draggable.on( 'dragEnd', function() {
console.log('dragEnd');
});
});
You can check this website for reference:
https://codepen.io/desandro/pen/RNeGOQ

Related

Simulate a double click on an html element [duplicate]

This question already has answers here:
How to programmatically fire a dblclick event defined with addEventListener?
(2 answers)
Closed 2 months ago.
Yo,
For the past weeks i try to simulate a double on my element but i can't find a solution. I know the click() method exist but i can't find a smilary method for my problem. Thanks for your help 🙂
You can trigger dblclick event by using dispatchEvent like this:
const event = new MouseEvent('dblclick');
document.getElementById('myId').dispatchEvent(event);
If you are using JQuery, The second way is:
$('#myId').dblclick()
var button = document.getElementById("myButton");
button.addEventListener("dblclick", function() {
alert("Works!");
});
const event = new MouseEvent('dblclick');
button.dispatchEvent(event);
<button id="myButton">Test</button>

Mousedown event triggers only on right click [duplicate]

This question already has answers here:
How to distinguish between left and right mouse click with jQuery
(20 answers)
Closed 3 years ago.
Why does:
$(document).on('mousedown', '.noUi-handle', function() {
$(this).find('.noUi-tooltip').show();
});
Only trigger when I right-click .noUi-handle ?
I want it to trigger only on left-click.
Use click event instead of mousedown.
$(document).on('click', '.noUi-handle', function() {
$(this).find('.noUi-tooltip').show();
});

Jquery listener for change of element id [duplicate]

This question already has answers here:
Firing event on DOM attribute change
(6 answers)
Closed 8 years ago.
I am trying to set up a listener to fire when an elements id changes, I don't know if this is possible but here is my attempt (that isn't working).
$(".appSelect").on('change', function() {
//fire change event
});
maybe something like :
$(".appSelect").attr("id").on('change', function() {
Is this possible in jquery?
Thanks!
It's not possible with a listener because no event occurs. You'd have to periodically check the ID with a setInterval function or similar. Better, tie into the function that changes the ID with a callback.

Jquery doesn't bind to new appended elements [duplicate]

This question already has answers here:
jQuery how to bind onclick event to dynamically added HTML element [duplicate]
(9 answers)
How do I attach events to dynamic HTML elements with jQuery? [duplicate]
(8 answers)
Closed 9 years ago.
I find out that by default JQuery doens't bind the new inserted elements.
Here is a snippet which shows what I'm trying to explain.
http://jsfiddle.net/8hf5r/2/
$('#chg-em').on('click', function(e) {
$('.local').empty().append('<p id="orange-juice">orange juice<p>');
e.preventDefault();
});
$("#orange-juice").on('click', function() {
alert('ola');
});
Which might be the solution? :(
Thanks.
Use delegated events :
$(".local").on('click', '#orange-juice', function() {
alert('ola');
});
Learn about delegated event here : http://api.jquery.com/on/#direct-and-delegated-events

The click event does not seem to work with a select element in IE [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Click trigger on select box doesn't work in jQuery
I am trying to do the following to simulate a click on a select element:
setTimeout(function () {
$('#' + id).trigger('click');
}, 1000);
This works in Firefox but not IE. Is there some possible work around for IE?
Try attaching your custom click event handler, before triggering the click event:
$('#' + id).bind('click', function() {
alert('clicked');
});

Categories