Блог

У меня есть пример:

 <div class="class1" id="id_1">
test
</div>
 

 function handler(ev) {
    let target = $(ev.target);
    let elId = target.attr('id');
    if( target.is("div[id^='id_']") ) {
         let lastChar = elId.substr(elId.length - 1);
       alert('The mouse was over'  lastChar );
    }
}
$("div[id^='id_']").mouseleave(handler);
 

Это работает таким образом, что если я навожу курсор на элемент, отображается предупреждение — проблема возникает, если у меня есть только изображение в этом div — тогда оно не работает. Как заставить его работать еще больше, если у меня есть только такая картинка, например, у меня есть:

 <div class="class1" id="id_1">
<img src="/img_src">
</div>
 

Используйте $(ev.currentTarget) или $(this) для ссылки на элемент, соответствующий селектору, а не на любую цель, являющуюся потомком

 function handler(ev) {
   
    console.clear();   
    let $div = $(ev.currentTarget);
    let elId = $div.attr('id');
    console.log('currentTarget id:', elId)
    
    $div= $(this);
    elId =$div.attr('id');
    console.log('this id:', elId)
}
$("div[id^='id_']").mouseleave(handler); 

 .class1{ margin : 1em; border: 1px solid green 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1" id="id_1">
<div class="inner">test 1</div>
</div>
<div class="class1" id="id_2">
<div class="inner">test 2</div>
</div>