Get the control ID dynamically - JQuery

Question

How can I get the control ID of a asp.net control while mouseover on a control dynamically. For example, I've page called "Default.aspx" which has 5 text boxes, two check boxes, 2 radio buttons. So, when I mouseover a specific control I should be able to get the currently hovered controls ID using javascript or jquery. I dont want to write code for every control, instead the javascript should be able to detect the mouseover event when the mouse is moved over any control and in the backend the controld ID should be returned.

Any solution ?

Answer 1

$("input").mouseenter(function(e){
e.stopPropagation();
$id=$(this).attr("id");
});

this will return the id of input control currently being hovered

Answer 2

I chuckle a bit when jQuery developers use jQuery in their handler function when it's the long way to get the answer. Here's a shorter/faster way:

$("input").mouseenter(function(e){
    var id = this.id;
    // do whatever you want with the id here
});

If you're truly trying to pass this to your back-end web server (a part of your question that was not clear to me), then you will need to initiate communications to the web server either using a posted form or an ajax call.

Answer 3

This might not be the best practices way, but I would set the onmouseover event to trigger a function that sets the value of a hidden field. In your JQuery read the value of that field and you will know which one they did the mouseover on...

Answer 4

$("input").hover(function(){
    // hover on
    var theId = $(this).attr("id");
    if(theId) {
        // do something 
    }
    else {
        // no id found  
    }
},
function(){
    // hover off
});

I suppose you won't need to check if an id exists since it's a .NET control though