jquery - html - Map Fields screen with jQuery (ASP.NET WebForms) - answerstu - answerstu.com answerstu

html - Map Fields screen with jQuery (ASP.NET WebForms)

Need to understand the best way to map all the fields that I have on my screen (divs, imgs, inputs, dropdows, tables, etc ...). I have the following code:

$(document).ready(function () {

    $('body > *').mouseenter(function () {
        $('*').removeClass('objectFocus');
        $(this).addClass('objectFocus');
    });

    $('body > *').mouseleave(function () {
        $(this).removeClass('objectFocus');
    });

    $('*').on('click', '.objectFocus', function () {
        alert($(this).attr('id'));
        $(this).removeClass('objectFocus');
    });

});

But I am facing problem with objects inside divs or tables. I know it is possible to use the feature .children() or .parent(). I would like to know the best way to do this, a generic form that I can access from a text box to div which is the same.

I have this in my jsFiddle: Not working as expected

Him when we hover over the objects on the screen, is added a red border on them ... but when we insert objects inside a div, unfortunately it only enhances the parent div.

apparently it works: Expected Result (but not including divs)

Anyone have any solution? Perhaps using jQuery.map() we get the result?

Thank you in advance.

2 Answers

  1. Randolph- Reply

    2019-11-15

    $(document).ready(function () {
      $('body').on('mouseenter','input',function() {
        $(this).toggleClass('objectFocus');
      });
      $('body').on('click','.objectFocus',function() {
        alert($(this).attr('id'));
        $(this).removeClass('objectFocus');
      });
    });
    
  2. Randy- Reply

    2019-11-15

    /* js */
    
     $('body').on('focus','input', function () {
        $(this).addClass('objectFocus');
        console.log($(this).attr('id'));
    });
    
    $('body').on('blur','input', function () {
        $(this).removeClass('objectFocus');
    });
    
    /* css */
    
    .objectFocus {
        border: 1px solid red;
        outline: none!important;
    }
    

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>