Adding text to a div using jQuery

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!

Have you tried after placing the code inside a controller? It is not at all listening to mouseover event. — krishna
– krishna, Commented Sep 29, 2015 at 9:02

akash · Accepted Answer · 2015-09-29 08:05:26Z

2

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

edited Sep 29, 2015 at 8:05

answered Sep 29, 2015 at 7:56

akash

2,1674 gold badges21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Makudex Over a year ago

Please make your answer more detailed.

akash Over a year ago

@FiidoFirdauz what do you mean ?

akash Over a year ago

@Makudex thanks for your advise just added some details

Nitsorn Wongsajjathiti Over a year ago

Thank you all, but somehow its still not working. I fixed all the syntax errors, no error in console.

akash Over a year ago

@NitsornWongsajjathiti my demo is not working for you ? update your fiddle what code you have added.

|

Tracy Fu · Accepted Answer · 2015-09-29 10:03:16Z

1

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

edited Sep 29, 2015 at 10:03

answered Sep 29, 2015 at 8:11

Tracy Fu

1,66212 silver badges22 bronze badges

5 Comments

Tracy Fu Over a year ago

Not even in the demo? The text shows up below the buttons.

Nitsorn Wongsajjathiti Over a year ago

It works in the demo (like other answers in this post) I don't get why it doesnt work on my localhost.

Tracy Fu Over a year ago

Do you have the page live somewhere that we can see? Are you sure that jQuery is loaded before you run the document ready?

Tracy Fu Over a year ago

I don't think Angular has loaded your view yet when your script is run.

Tracy Fu Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

Adding text to a div using jQuery

2 Answers 2

6 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related