使用jQuery将文本添加到div

Question

I am trying to do something very simple but somehow its not working.

I have 4 divs on the right, and one blank div on the left. I want the left div to show certain text, depending on which div I hovered on, on the right.

It's very simple, but somehow I am missing something.

<div class="col-md-6 col-sm-12 col-xs-12 Left">
    <h3>left:</h3>
    <div id="roles">
       <button class="role" id="role_1">
           Role_1
       </button>
       <button class="role" id="role_2">
           Role_2
       </button>
       <button class="role" id="role_3">
           Role_3
       </button>
       <button class="role" id="role_4">
           Role_4
       </button>   
    </div>
</div>
<div class="col-md-6 col-sm-12-col-xs-12 right">
    <div id="right">
    </div>
</div>

Here is my jQuery:

$(function(){
    $('#role_1').hover(function(){
        $('#right').html('<p>Text_1</p>')
    });
     $('#role_2').hover(function(){
        $('#right').html('<p>Text_2</p>')
    });
     $('#role_3').hover(function(){
        $('#right').html('<p>Text_3</p>')
    });
     $('#role_4').hover(function(){
        $('#right').html('<p>Text_4</p>')
    })

})

This is just a basic code to write "Text" when it hovers over #role_1. Somehow it doesn't work. It works on JSFiddle

Here is my CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>

EDIT: It works on JSFiddle. Somehow it is not working on http://hellosimpletax.com/#/

JSFiddle

Thank you!

Answer 1

Check your console you will find error

Uncaught SyntaxError: Unexpected token ILLEGAL

Try this you just forget to close #roles selector

$('#roles').mouseleave(function(){ $('#right').html('') }) 
---------^

Working Demo

Answer 2

Update

OP got it working by moving his code into the Angular controller as @krishna suggested in a comment after we noticed that the view wasn't full loaded on document ready.

Try this:

Working Fiddle: http://jsfiddle.net/tracyfu/twsL2fgq/6/

$(function(){
  $('#dev').on('mouseenter', function(){
    $('#right').html('<p>Text_1</p>');
  });
  $('#des').on('mouseenter', function(){
    $('#right').html('<p>Text_2</p>');
  });
  $('#eng').on('mouseenter', function(){
    $('#right').html('<p>Text_3</p>');
  });
  $('#art').on('mouseenter', function(){
    $('#right').html('<p>Text_4</p>');
  })
  $('#roles').on('mouseleave', function(){
    $('#right').html('');
  })     
})

A couple unrelated asides:

• If you specify col-md-6 , you shouldn't need to declare col-xs-12 since Bootstrap treats mobile as its baseline and should automatically stack your columns if you're using container-fluid
• The preferred way to attach event handlers with jQuery is by using on()