www.webdeveloper.com
Results 1 to 12 of 12

Thread: change html of div

  1. #1
    Join Date
    Apr 2012
    Posts
    110

    change html of div

    I am trying to change the content of divs, but it seems like after i click the first time, it won't let me change anything else after that. so i will click a link, it will go bold, but then when i try to click another, nothing happens. here is my code:

    Code:
    $('#allNav').click(function() {
    		$("#navPane").html("<li><div id='allNav'><strong><a href='#'>All</a></strong></div></li><li><div id='photoNav'><a href='#'>Photos</a></div></li><li><div id='docsNav'><a href='#'>Documents</a></div></li></ul> ");
    	});
    	$('#photoNav').click(function() {
    		$("#allTitle").html("Photos");
    		$("#navPane").html("<li><div id='allNav'><a href='#'>All</a></div></li><li><div id='photoNav'><strong><a href='#'>Photos</a></strong></div></li><li><div id='docsNav'><a href='#'>Documents</a></div></li></ul> ");
    	});
    	
    	$('#docsNav').click(function() {
    		$("#allTitle").html("Documents");
    		$("#navPane").html("<li><div id='allNav'><a href='#'>All</a></div></li><li><div id='photoNav'><a href='#'>Photos</a></div></li><li><div id='docsNav'><strong><a href='#'>Documents</a></strong></div></li></ul> ");
    	});
    Code:
    <div id="navPane">
    <li><div id="allNav"><strong><a href="#">~All</a></strong></div></li>
    <li><div id="photoNav"><a href="#">Photos</a></div></li>
    <li><div id="docsNav"><a href="#">Documents</a></div></li>
    </div>
    Last edited by droidus; 06-15-2012 at 09:10 PM.

  2. #2
    Join Date
    Jun 2012
    Posts
    20
    The reason that's happening is because you're removing the link which you had the event attached to. when you remove that anchor link, you remove the event as well and you have to reattach it.

  3. #3
    Join Date
    Apr 2012
    Posts
    110
    I am not sure what you mean. I am replacing the text inside the div with exactly was in there before.

  4. #4
    Join Date
    Jun 2012
    Posts
    20
    That doesn't really matter if it's the same or not, think of it this way, easy tag is unique and when you attach an event, you attach it to the tag, you remove that tag you remove everything associated with, including events whether you replaced it with the same text or not. What you'll have to do is store that function to a variable, attach the function by variable name, that at the end of that function, run that same command to attach the event again.

  5. #5
    Join Date
    Apr 2012
    Posts
    110
    I am still not sure what you mean. i have the tag, <div id="navPane">. this holds the event. that should not change. only what inside should. would you possibly be able to show me with my code, or a short example?

  6. #6
    Join Date
    Jun 2012
    Posts
    20
    You should look carefully at your code, you attached your event to allnav which is inside navpane, when you do $("#navpane").html you basically emptied out the contents of the tag, events included and replaced it with what you passed to the html function.

  7. #7
    Join Date
    Apr 2012
    Posts
    110
    so I am basically loosing the attached events with <div id='allNav'>? i guess I am confused, because I don't see the event that is physically attached. i understand that the event is when you click on it, but it should not get overridden, since each link is defined separately. and those links exist in each of the new htmls that are produced.

  8. #8
    Join Date
    Jun 2012
    Posts
    20
    Yes, you lost the event cause the original element it was attached to was replaced when you did the html call so you'll have to re-register the event with that element. There is no to physically see that you have an event attached to an element, it's more or less registered with the browser itself, is up to you to know that an event should be attached to it since you coded it. If an event is not triggering like it should, it's an indication that the event somehow was unregistered, and you happen to do that when you removed allnav and added it again.

  9. #9
    Join Date
    Nov 2010
    Posts
    1,084
    ... but if you just want to turn a link bold when you click it, aren't you better off doing that with css?

  10. #10
    Join Date
    Jun 2012
    Posts
    20
    Quote Originally Posted by xelawho View Post
    ... but if you just want to turn a link bold when you click it, aren't you better off doing that with css?
    Yes. Make make a class called bolded with the style font-weight: bold; and then use addClass removeClass to add the bolded class to the text.

  11. #11
    Join Date
    Nov 2010
    Posts
    1,084
    or just make a visited pseudo class for the relevant links - no js/jQ required...

  12. #12
    Join Date
    Apr 2012
    Posts
    110
    it's not only that that i'm changing, but it's also some more content of the page.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles