Question

当页面加载时，我的代码读取LocalStorage并检索保存的值。然后它将该值附加到页面内的DIV元素。

到目前为止它可行，但点击 sort-link-css 元素不会触发脚本。如果我删除附加的DIV并使用原始代码，那么所有脚本都可以正常工作。

HTML开头：

 <div id="thisclone">   

     // Lot of code 

 </div>

在LocalStorage中设置变量：

$('.region-checkboxes').click(function(e) { 

          var menu = $("#thisclone").html();     
          localStorage.menu = menu   


});

保存在LocalStorage中的HTML：

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

然后在页面顶部我正在阅读localStorage并将其附加到DIV：

<script>
    var fromstorage = localStorage.getItem('menu');
    $(fromstorage).appendTo(".menu-dupl");
</script>

视觉上，新添加的div看起来与起始div完全相同。但从功能上讲，简单的脚本不再起作用了。

脚本示例：

  $('.sort-link-css > a').click(function(e) {

     alert("Test");

   });

这只是一个不起作用的脚本。但基本上，与新附加的div关联的每个脚本都不再起作用。如果我删除新附加的div并使用原始div，脚本将再次开始工作。

我试过了：

  var fromstorage = localStorage.getItem('menu');

  $(fromstorage).clone().appendTo( ".menu-dupl" );

但仍然是同样的问题。

提前感谢您的帮助。

Answer 1

在简要回顾您的问题之后，我发现了以下内容：

$（fromStorage）.appendTo（＆＃34;。菜单-DUPL＆＃34）;

我并不过分关注这一特定行，因为您声明菜单呈现正确但我在检查您的代码段时没有注意到此类

您的脚本的潜在问题

$('.sort-link-css > a').click(function() { alert("Test") })

jQuery可能无法在DOM上找到正确的元素
执行此操作$('sort-link-css > a)时，您已声明要将此事件与<a></a>

.sort-link-css

现在，当您将菜单附加到另一个元素时，潜在问题可能会发挥作用。这个操作可能使jQuery难以正确识别正确的选择器

调试

您可以在添加菜单后尝试注销jQuery表达式吗？
在chrome调试器控制台中，在页面加载后输入以下内容：$(".sort-link-css > a")
这应该注销所有匹配的元素。如果未定义，请尝试重新编写jQuery选择器以正确识别这些元素

将localStorage中的内容附加到div脚本后不再起作用

1 个答案:

$（fromStorage）.appendTo（＆＃34;。菜单-DUPL＆＃34）;

您的脚本的潜在问题

调试