CODEWITHSUNDEEP
javascriptjqueryhtml
Edgars
Edgars

Reputation: 953

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(&quot;/assets/blue-up.png&quot;) 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(&quot;/assets/down.png&quot;) 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(&quot;/assets/down.png&quot;) 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.

Upvotes: 0

Views: 77

Answers (1)

richdotjs
richdotjs

Reputation: 214

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

Upvotes: 1

Related Questions