We Keep Coding

After appending content from localStorage to div scripts doesn't work anymore

When page loads my code reads LocalStorage and retrieves saved value. Then it appends that value to DIV element within page.
Thus far it works, but clicking on sort-link-css elements won't trigger script. If I remove appended DIV and use original code, then all scripts work perfectly.
HTML in beginning:
<div id="thisclone">
// Lot of code
</div>
Setting variable in LocalStorage:
$('.region-checkboxes').click(function(e) {
var menu = $("#thisclone").html();
localStorage.menu = menu
});
HTML that is saved in LocalStorage:
<div class="row select-row" style="margin-bottom:5px !important;">
<div class="sort-link-css" id="to-hide" style="background: url("/assets/blue-up.png") 93px 11px no-repeat;">
<a class="sort_link desc" data-method="get" data-remote="true" href="http://www..eu/lv?q%5Bs%5D=height+asc">AUGUMS</a>
<span class="num">1</span>
</div>
<div class="sort-link-css" style="background: url("/assets/down.png") 93px 11px no-repeat;">
<a class="sort_link" data-method="get" data-remote="true" href="/lv?q%5Bs%5D=age+desc">VECUMS</a>
<span class="num">0</span>
</div>
<div class="sort-link-css" style="background: url("/assets/down.png") 93px 11px no-repeat;">
<a class="sort_link" data-method="get" data-remote="true" href="/lv?q%5Bs%5D=votes_for.size+desc">PATĪK</a>
<span class="num">0</span>
</div>
</div>
Then at the top of page I am reading localStorage and appending it to DIV:
<script>
var fromstorage = localStorage.getItem('menu');
$(fromstorage).appendTo(".menu-dupl");
</script>
Visually, newly appended div looks exactly like the starting one. But functionally, simple scripts doesn't work anymore.
Script example:
$('.sort-link-css > a').click(function(e) {
alert("Test");
});
This is just one script that doesn't work.But basically, every script associated to newly appended div doesn't work anymore. Script start to working again if I remove newly appended div and use original div.
I tried:
var fromstorage = localStorage.getItem('menu');
$(fromstorage).clone().appendTo( ".menu-dupl" );
But still the same problem.
Thanks in advance for any help.

After briefly reviewing your question, I've noticed the following:
$(fromStorage).appendTo(".menu-dupl");
I'm not overly concerned about this particular line because you stated that the menu renders correctly but I didn't notice this class while inspecting your code snippets
Potential issue with your script
$('.sort-link-css > a').click(function() { alert("Test") })
It is possible that jQuery is not able to find the right elements on the DOM
When you do this $('sort-link-css > a), you're stating that you want to bind this event on <a></a> elements that are direct children of .sort-link-css
Now the potential issue might come into play when you append the menu on to another element. It is possible that this operation is making it difficult for jQuery to correctly identify the correct selectors
Debugging
Could you try to log out the jQuery expression after you append the menu?
In chrome debugger console, enter the following after the page loads: $(".sort-link-css > a")
This should log out all of the matched elements. If it is undefined, try to rework your jQuery selector to correctly identify those elements

Adding new elements inside a div with auto increment Id

I have been trying to figure a way to add a div inside another div using a button, but I think the logic for it may be a bit beyond my reach at the moment. Basically I have this labs facilities, and when I create one in a page it should add them to the database, that is done and working.
Then I needed a div acting as popUp to retrive the information of each lab, that also works but if I have more than one lab is displays all the information of those labs in that one popUp meant for one. Which brings me to my next point.
I needed and decided that when I click the Aceptar button the new div created should have a id=n, where for each new div added it goes n+1, so div1 has a id of 1, div 2 of 2 and so on. I think this made using arrays... in that way I can update my php code to say:
function getLabs(){
$query = "SELECT bk.idlab , bk.capacidad, bk.carrera, bk.ubicacion FROM labs as bk WHERE idDiv=bk.idlab"; (or something like that I think I have to declare idDiv first)
$result = do_query($query);
return $result;
}
Right now this is the code I have...because I am stumped:
Html code in the php. page for the list of labs:
<div class="scroll-area" id="lista"> //THIS IS THE BIG DIV CONTAINING THE LIST
<div> //THIS FOR SHOWING PURPOSES HOW IT LOOKS.
<p>Lab #1</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box">
<p>Lab #2</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>
<div class="box"> //So if I add another it would be Lab#4 with id=4
<p>Lab #3</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div
</div>
Here is the button used in ANOTHER page that I am using for adding the labs to the database which is working 100%:
<input class="formatButton verInfo2" type="button" value="Aceptar" id="btnAceptar" onclick="agregar()"/>
In both pages (list and add) the scripts as well as the includes are present.
And the code I was thinking for adding new divs (as well as removing one) goes along these lines:
function agregar() {
var div = document.createElement('div');
div.className = 'box';
'<div class="box">
<p>Lab HERE GOES NUMBER</p>
<p class="info">Info</p>
<p class="info">Reservar</p>
</div>';
document.getElementById('content').appendChild(div);
}
function eliminar(input) {
document.getElementById('content').removeChild( input.parentNode );
}
But I hitted a mental block about how to proceed now >.< any help would be a godsend, I tried to keep it brief and only put the relevant code but if there is anything else I could provide in order to get some help I will do it.
Thanks a lot in advance and best wishes!

I think you can do this:
div.id = querySelectorAll('lista > div').length +1;
The length varies each time you add the div. So this should work for you.

If I understand the code correctly, you want to click a button and be able to add a div inside another div with the id = to the previous id+1?
JQUERY
$(document).ready(function(){
var counter = 1;
$('#addDiv').click(function(){
$('#'+counter).html('<div id="' + (++counter) + '"></div>');
});
});
HTML
<div id="1">
</div>
<button id="addDiv">Add Div Inside</button>

Event Handlers not working after DOM manipulation

On page load I bind Event Handlers with content which is hidden on at the time of page load.
If users clicks on the button, the hidden content is pulled and replaces the main content of the page, Now the event Handlers which were initially binded do not work.
HTML code on Page load
<p> Initial content of the page </p>
<button id="button"> Click Here to change content</button>
<div class="show-later" style="display: none;"> Some Hidden content </div>
After the user clicks a button the new dom looks some thing like this
<p>
<div>Some Hidden content</div>
</p>
After the manipulation the event handlers binded to the div element do not work any more. Please notice that the div goes into the P element after DOM Manipulation.
jQuery Code:
$('#button').click(function(){
var show_later = $('.show-later').html();
$('p').html(show_later);
});
$(document).ready(function(){
$('.show-later').click(function(){
// Do something.....
});
});

You're not moving the <div>, you're just taking its content (a text node) and copying that to the paragraph. Contrary to what you've stated in the question, the resulting DOM will actually look like this:
<p> Some Hidden content </p>
<button id="button"> Click Here to change content</button>
<div class="show-later" style="display: none;"> Some Hidden content </div>
The <div> is still there, it still has content, and it still has the event handler for click bound to it; but it's also still hidden, so there's no way you can click on it.
I'd suggest that you actually move the <div> into the <p> element, like so:
$('.show-later').show().appendTo('p');
That will select the <div>, make it visible, and then move the element itself into the <p>.

have you tried to change your code like this?
$(document).ready(function(){
$(document).on('click', '.show-later', function(){
// Do something.....
});
});
Update2:
$('#button').click(function(){
var show_later = $('.show-later').html();
$('p').html(show_later).addClass('show-later');
});
Update1: I'm not sure, what your problem exactly is. Maybe you want to make a jsfiddle-example...
The 'on'-Method registers events so that even if you remove the element a make a new one, the events is already registered.

If you do
var show_later = $('.show-later').html();
$('p').html(show_later);
then no event handler bound to .show-later will become bound to the p. All you're doing is changing the contents of the p. I suggest changing the HTML as such:
<p class="hide-later"> Initial content of the page </p>
<p class="show-later" style="display: none;"> Some Hidden content </div>
<button id="button"> Click Here to change content</button>
and the javascript as such:
$('.show-later').show();
$('.hide-later').hide();

jQuery: get a reference to a specific element without using id

I'm tinkering a bit with jquery to show a hidden div when a link is clicked. This should be fairly simple, but there's a flaw to it in this case. I have the following markup:
<div class="first-row">
<div class="week">
<p>Uge 2</p>
<p>(08-01-11)</p>
</div>
<div class="destination">
<p>Les Menuires</p>
<p>(Frankrig)</p>
</div>
<div class="days">4</div>
<div class="transport">Bil</div>
<div class="lift-card">3 dage</div>
<div class="accommodation">
<p><a class="show-info" href="#">Hotel Christelles (halvpension)</a></p>
<p>4-pers. værelse m. bad/toilet</p>
</div>
<div class="order">
<p>2149,-</p>
<p class="old-price">2249,-</p>
</div>
<div class="hotel-info">
<!-- The div I want to display on click -->
</div>
</div>
When I click the "show-info" link I want the "hotel-info" div to display.
My backend devs don't want me to use ids (don't ask me why..) and the above markup is used over and over again to display data. Therefore I need to be able to access the "hotel-info" div in the "first-row" div where the link is clicked.
I've tried to do something like:
$(document).ready(function() {
$('.show-info').click(function() {
var parentElement = $(this).parent().parent();
var lastElementOfParent = parentElement.find(".show-hotel");
lastElementOfParent.show();
});
});
But without a result :-/ Is this possible at all?
Any help is greatly appreciated!
Thanks a lot in advance!

Try this:
$('.show-info').click(function() {
$(this).closest('.accommodation').siblings('.hotel-info').show();
});
Even better imo, as it would be independent from where the link is in a row, if every "row div" has the same class (I assume only the first one has class first-row), you can do:
$(this).closest('.row-class').find('.hotel-info').show();
Reference: .closest, .siblings
Explanation why your code does not work:
$(this).parent().parent();
gives you the div with class .accommodation and this one has no descendant with class .hotel-info.
It is not a good idea to use this kind of traversal for more than one level anyway. If the structure is changed a bit, your code will break. Always try to use methods that won't break on structure changes.

You're right in not using an ID element to find the DIV you want :)
Use closest and nextAll
Live demo here : http://jsfiddle.net/jomanlk/xTWzn/
$('.show-info').click(function(){
$(this).closest('.accommodation').nextAll('.hotel-info').toggle();
});

jQuery Toggle modification

I am using the below javascript (jQuery) to toggle open two DIVs. The DIVs open fine and open one at a time, which is what I am after. However, I also want the DIVs to close when they are clicked a second time, which doesn't happen despite my best efforts!
Javascript:
$(document).ready(function() {
$('.info_tab').click( function() {
var currentID = $(this).next().attr("id");
$('.toggle_info[id!=currentID]').hide(); /* the intention here is to hide anything that is not the current toggling DIV so as to close them as a new one is opened. I thought this would leave the currently selected DIV uninterrupted to toggle closed (below), but it doesn't */
$(this).next().toggle();
return false;
});
});
HTML:
<div class="info_tab">
<h1>Person One</h1><br />
<p>click for less info</p>
</div>
<div id="person_one_info" class="toggle_info">
<p>More information about Philip Grover</p>
</div>
<div class="info_tab">
<h1>Person Two</h1><br />
<p>click for less info</p>
</div>
<div id="person_two_info class="toggle_info">
<p>More information about Roy Lewis</p>
</div>
If any more info is needed, just ask and I'll be happy to edit the question.
Cheers,
Rich

you have the concept down, but not using the "currentID" correctly. You need to remember it's a variable, and can't be in another string if you want it evaluated.
With that said, try this:
$('.toggle_info[id!='+currentID+']').hide();
This makes the variable get evaluated in the selector, then passes it off to jQuery to find.
it looks like you're going to an accordian effect though. And jQuery UI has just such a control that you can use (if you're interested). if you're going for experience, then carry on. ;-)