JQuery unable to perform hover events on dynamically added input boxes

Question

I have been tying to perform hover operation on dynamically added input fields.

$( "body" ).delegate( "input", "hover", function(event) {
    alert("ok");
});

Also tried using but works only for static fields.

 $('input').hover(
    function(event) {
        alert("bring tooltip");
    }, 

    function(event) {
        if (hasfocus) {
            alert("Keep the tooltip");
        }
    }
);

Need suggestions.Thanks

Take a look at this post: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Botimoo, Jun 10 '17 at 09:41
@Botimoo I have tried "live" but error in console saying "live is not a function" — koushik, Jun 10 '17 at 09:43
Both `live` and `delegate` are deprecated, you should be using `on` — adeneo, Jun 10 '17 at 09:44
Just as the post I linked above and everyone here says: use `.on()`. — Botimoo, Jun 10 '17 at 09:50

score 0 · Accepted Answer · answered Jun 10 '17 at 09:46

Firstly, you should be using on().
Secondly, you shouldn't be using a hover event.
Thirdly, delegate to the document, not the body, or preferable just to the closest static parent element.

$(document).on({
    mouseenter : function() {

    },
    mouseleave : function() {
        if ( this === document.activeElement ) {
            // has focus
        }
    }
}, 'input');

score 0 · Answer 2 · answered Jun 10 '17 at 09:54

0

try this

   $("input").on("hover",function(event){
    alert("bring tooltip");
});

answered Jun 10 '17 at 09:54

Bahadur Singh Deol

753
2
6
17

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Badacadabra Jun 10 '17 at 12:19

JQuery unable to perform hover events on dynamically added input boxes

2 Answers2