Добавление текста в div с помощью jQuery

Question

Я пытаюсь сделать что-то очень простое, но как-то его не работает.

У меня есть 4 divs справа и один пустой div слева. Я хочу, чтобы левый div показывал определенный текст, в зависимости от того, с каким div я зависал, справа.

Это очень просто, но почему-то я чего-то не хватает.

<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> 

Вот мой 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>') 
    }) 

}) 

Это просто базовый код, чтобы написать "Текст", когда он парит над # role_1. Как-то это не сработает. Он работает на JSFiddle

Вот мой CDN:

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

EDIT: Он работает на JSFiddle. Как-то не работает на http://hellosimpletax.com/#/

JSFiddle

Спасибо!

Answer 1

Update

OP заработал, переместив свой код в угловой контроллер, как предложил @krishna в комментарии после того, как мы заметили, что представление не было полностью загружено на готовый документ.

Попробуйте это:

Рабочая скрипку: 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(''); 
    })  
}) 

Пара несвязанные отступлений:

• Если вы укажете col-md-6, вы не должны объявить col-xs-12 поскольку Bootstrap рассматривает мобильный как его базовый уровень и должен автоматически складывать ваши столбцы, если вы используете container-fluid
• Предпочтительный способ подключения обработчиков событий с JQuery является использование on()

Answer 2

Проверьте вашу консоль вы найдете ошибки

Uncaught SyntaxError: Unexpected token ILLEGAL

Попробуйте это вы просто забыли закрыть #roles селектор

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

Working Demo