CODEWITHSUNDEEP
javascriptjquery
Devin Green
Devin Green

Reputation: 23

Issue with reseting the html value of div (jquery)

I'm currently building a website using jquery. I've found a script which will cause my div, with the id "content", to hide once I click outside of it. I have links which will show the div and then set the html to what I specify. My only problem is that once I select one of the links that triggers the html change and then click outside the div, I will select another link and only the html of the initial trigger is shown!

How can I force the script to show the correct corresponding html?

I am using the following code to set the value of said div:

<script>

$("#projects").click(function () {

  $("#content").replaceWith( "This should display the projects!" );

});

</script>

<script>

$("#resources").click(function () {

  $("#content").replaceWith( "This should display the resources!" );

});

</script>

<script>

$("#contact").click(function () {

  $("#content").replaceWith( "This should display the contact information!" );

});

</script>

Upvotes: 2

Views: 70

Answers (2)

Philip Schweiger
Philip Schweiger

Reputation: 2734

The replaceWith method will "Replace each element in the set of matched elements with the provided new content." (from the docs).

This means that after you call it, there is not longer a div with an ID of "content" in your page - it has been replaced!

What you are probably looking for is the html() method:

http://api.jquery.com/html/

Example use:

$("#contact").click(function () {

  $("#content").html( "This should display the contact information!" );

});

Upvotes: 4

Phil.Wheeler
Phil.Wheeler

Reputation: 16848

Without being 100% clear on what you want to do,

Try changing your $.replaceWith() functions with the following:

$('#content').empty()
    .html('The is all the contact / resource / project information you want to display');

Upvotes: 1

Related Questions