How To Get Jquery Selector From Event Handler

October 26, 2023 Post a Comment

I have several input elements on a page and one of them (the first one) is where I can enter in a specific id of any of the other elements. I want my code set up in such a way tha

Solution 1:

Instead of using $('#' +selector) use $('input[id^=target]') (or add a common class) and your other logic remains the same

$(document).ready(function() {
     var selector; 
     
     $('#selector').on('input', function() {
         selector = $(this).val();
     });

     $('input[id^=target]').on('focus', function() {
         if ($(this).is('#' + selector)) {
             $(this).val("that's me: " + selector).css('border', 'solid red 1px');
         }
     }).on('blur', function() {
         $(this).val('').css('border', 'solid #555 1px');
     });
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><inputid='selector'type='text' /><br /><inputid='target1'type='text' /><br /><inputid='target2'type='text' /><br /><inputid='target3'type='text' /><br />

Solution 2:

charlietfl is right. You have to define selector first. So, by simply placing the focus and blur functions within the input function, it works only when the selector is defined.

$(document).ready(function() {  
  var selector; 

    
  $('#selector').on('input', function() {    
    selector  = $(this).val();

    $('#' + selector).on('focus', function() {
      if ($(this).is('#' + selector)) {    
        $(this).val("that's me: " + selector).css('border', 'solid red 1px');
      }  
    }).on('blur', function() {
      $(this).val('').css('border', 'solid #555 1px');
    });  
    
  });  
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><inputid='selector'type='text' /><br /><inputid='target1'type='text' /><br /><inputid='target2'type='text' /><br /><inputid='target3'type='text' /><br />

Solution 3:

Your code tries to attach on focus + on blur handlers once, at the start of the program, when selector is still undefined:

$('#' + selector).on('focus', function() {

What you need to do instead is re-attach the handlers whenever the #selector changes (and also make sure to un-attach the previous handlers):

$(document).ready(function() {
     var elem; 
     
     $('#selector').on('input', function() {
         if (elem) {
             elem.off('focus');
             elem.off('blur');
         }
         elem = $('#' + $(this).val());
         elem.on('focus', function () {
             $(this).val("that's me: " + selector).css('border', 'solid red 1px');
         });
         elem.on('blur', function () {
             $(this).val('').css('border', '');
         });
     });
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><inputid='selector'type='text' /><br /><inputid='target1'type='text' /><br /><inputid='target2'type='text' /><br /><inputid='target3'type='text' /><br />

Solution 4:

You have defined your event at the start with undefined value and it's not being changed anymore. You have to create eventListener after input when you have value in your variable.

Don't forget to unbind old listeners

On each input you should use jQuery unbind to unbind your previous listener so it will not keep stacking up and don't forget to check if element exists.

The unbind() method was deprecated in version 3.0. Use the off() method instead. You can read more about off() here.

 $(document).ready(function() {
var selector;
var $element;
var $newElement;

$('#selector').on('input', function() {
    selector = $(this).val();
    $newElement = $('#' + selector);
    if ($newElement) {
        if ($element) $element.off();
        $element = $newElement;
        $element.on('focus', function() {
            if ($(this).is('#' + selector)) {
                $(this).val("that's me: " + selector).css('border', 'solid red 1px');
            }
        }).on('blur', function() {
            $(this).val('').css('border', 'solid #555 1px');
        });
    }
})
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><inputid='selector'type='text' /><br /><inputid='target1'type='text' /><br /><inputid='target2'type='text' /><br /><inputid='target3'type='text' /><br />

Solution 5:

Just like charlietfl commented on your question. You are setting the focus event listener to a selector that has not gotten a value yet. $('#' + selector) has no result at initialization, so nothing will happen.

Most of your code is good, but the problem is in the selecting the inputs after the <input id="#selector" type="text"/> element.

You'll want to set the event listeners to all of the inputs, except maybe the first one, and listen for their focusses and blurs.

$('input:not(#selector)').on('focus', function() {
  if ($(this).is('#' + selector)) {    
    $(this).val("that's me: " + selector).css('border', 'solid red 1px');
  }  
}).on('blur', function() {
  $(this).val('').css('border', 'solid #555 1px');
});

Now you can freely change the selector variable and check it each time when a user focusses on the all of the inputs but the first.

Edit: This is one of my first comments here on stackoverflow and I'm trying to learn from it. If this is wrong, then could somebody help me out in explaning why. Thanks!

Html5 Tutorial