jQuery - mousemove on dynamically created element

Question

I want to trigger mousemove insinde a dynamic created element called '.box'. How can I add this condition to the following code?

jQuery

                $(document).mousemove(function (event) {
                  .....
            });

Answer 1

 $(document).on('mousemove', '.box', function (event) {

 });

This is a delegated event handler and works by listening for the event to bubble up to a non-changing ancestor. It then applies the jQuery selector at event time to the elements in the bubble chain. It then applies the function to any matching elements that caused the event.

The upshot of this is that the elements only need to exist when the event happens, not when the event is registered.

document is the default if nothing is closer. Do not use 'body' as the default as it will not always respond to mouse events (styling can cause it to have a zero computed height).

Answer 2

Try this : use .on() to bind event to the dynamically created elements. This actually delegate the event to the matched element inside document

$(document).on("mousemove", ".box", function (event) {
                  .....
});