Fire javascript when hovering an element

237
November 21, 2016, at 5:56 PM

I have the html below. You can see a live version.
As you can see I have multiples <h3> elements, with names, and when you click on the name, a sublist shows up with SlideToggle().
I need to active this click effect when hovering that object for 2 seconds.
I need to replicate the click effect when I'm hovering that element.
I could do it with the click event, but I can't figure out a way to do it to all <h3 elements using the hover effect.

   <li>
      <h3 data-id="3" class="prof-name">Sigmund Berge 
      <input type="checkbox" name="" value="" class="check_prof">
      </h3>
     <ul class="list-disc ui-sortable" id="oi" style="display: none;">
        <li data-dia="seg" data-time="08:30:00" data-id="1" class="ui-sortable-handle">Lab I</li>
        <li data-dia="ter" data-time="10:30:00" data-id="2" class="ui-sortable-handle">Lab II</li>                                      
     </ul>
  </li>
  <li>
     <h3 data-id="4" class="prof-name">Eusebio Rice 
       <input type="checkbox" name="" value="" class="check_prof">
     </h3>              
    <ul class="list-disc ui-sortable">
       <li data-dia="sex" data-time="18:30:00" data-id="5" class="ui-sortable-handle">Estatistica</li>
       <li data-dia="seg" data-time="08:30:00" data-id="6" class="ui-sortable-handle">Calculo A</li>
    </ul>
 </li>
 <li>
    <h3 data-id="5" class="prof-name">Dr. Andy Bailey 
      <input type="checkbox" name="" value="" class="check_prof">
    </h3>
    <ul class="list-disc ui-sortable">
       <li data-dia="qua" data-time="14:30:00" data-id="3" class="ui-sortable-handle">Engenharia de Software</li>
    </ul>
 </li>
 <li>
   <h3 data-id="6" class="prof-name">Mr. Durward Crooks I 
     <input type="checkbox" name="" value="" class="check_prof">
   </h3>
 </li>
</ul>   

I could get the desire effect but only hard coding the element's ID (just for test) and it worked:

//HOVER effect

<script type="text/javascript">
        $(function(){
            var old_teacher;
            $('.list-disc').sortable({
                connectWith: '.list-disc',
                over: function(event, ui){
                    var timeoutId;
                    $(".prof-name").hover(function(event) {
                        var $obj = event.target;
                        if (!timeoutId) {
                            timeoutId = window.setTimeout(function() {
                                timeoutId = null;
                                console.log($(this));
                           }, 2000);
                        }
                    },
                    function (event) {
                        if (timeoutId) {
                            window.clearTimeout(timeoutId);
                            timeoutId = null;
                        }
                        else {
                           $(event.target).next().slideToggle();
                        }
                    });
                },
                start: function (event, ui){
                    old_teacher = ui.item.parent().prev().attr('data-id');
                },
                stop: function (event, ui){
                    $.ajax({
                        type: "POST",
                        url: '{{ URL::to("/professor") }}',
                        data: { disciplina: ui.item.attr('data-id'), professor: ui.item.parent().prev().attr('data-id'), old: old_teacher },
                        success: function(data){
                        },
                        error: function(data){
                            console.log( old_teacher);
                        }
                    });
                }
            });
        })
</script>   

You will see the hard code here:

$("h3[data-id='3']").hover 

I can't do that of course. So how may I do that dynamically ??

Answer 1

You have many options for achieving this, imo the two most basic methods being:

1.) Use a class selector for binding the .hover event. Looks like you can use prof-name:

$(".prof-name").hover 

2.) Use delegation if the elements are loaded periodically, you would probably want to add a wrapper class:

<div class='wrapper'>
...
   <li>
      <h3 data-id="3" class="prof-name">Sigmund Berge 
      <input type="checkbox" name="" value="" class="check_prof">
      </h3>
     <ul class="list-disc ui-sortable" id="oi" style="display: none;">
        <li data-dia="seg" data-time="08:30:00" data-id="1" class="ui-sortable-handle">Lab I</li>
        <li data-dia="ter" data-time="10:30:00" data-id="2" class="ui-sortable-handle">Lab II</li>                                      
     </ul>
  </li>
...
</div>

Then use something like:

$(".wrapper").on('hover', '.prof-name', function(){
});
Answer 2

On mouseenter start the timeout, on mouseleave clear the timeout.
If the timeout reaches it's end point, just use $hoveredElSelector.trigger("click") if you already have a click function bound to that element. You could also create your functions first, and always start the timeout, both on click or mouseenter mouseleave ( the .hover()) - just using a 0 timeout for the click:

function ANIM() {
  $(this).next().slideToggle( $.proxy(CLEAR,this) );
}
function CLEAR() {
  return clearTimeout( this.timeout );
}
function SET() {
  this.timeout = setTimeout( $.proxy(ANIM,this), event.type==="click"?0:2000 );
}
$("h2").click(ANIM).hover(SET, CLEAR);

Here's a live example

READ ALSO
Using Regex to search for a string and add a class to that string

Using Regex to search for a string and add a class to that string

Trying to search my html for a string pattern /fox/ and add a class to that string. orange.

238
jquery action for all input

jquery action for all input

Don't know how to phrase this to search the web for the answer. .

415
bootstrap form-group separating textbox from button

bootstrap form-group separating textbox from button

I'm trying to make a form-group with a textbox and a button using asp. net and bootstrap.

412
Image slider in background

Image slider in background

I have a jQuery image slider and a navigation bar. I would like my image slider to go behind the navigation bar because when you try and navigate using the navigation bar, the image is covering the links.

308