通過jQuery添加HTML元素導致Etalage插件中的錯誤（功能碰撞問題）

TLDR：我找不到的錯誤是阻止插件在HTML元素通過jQuery注入時工作。通過jQuery添加HTML元素導致Etalage插件中的錯誤（功能碰撞問題）

摘要：，如果你有過HTML控件中的插件設計，但因爲我沒有我想要加冕圖像標記，以獲得鼠標懸停「懸浮縮放」屬性，但是當我添加必要的HTML屬性通過jQuery的功能，如.wrap();.after();和.addClass();，所有的圖像消失。我必須通過jQuery DOM操作來完成，因爲我沒有直接控制HTML。（不要問，長話短說，必須是jQuery）。奇怪的是，在相同的示例環境下（見下文），如果我添加HTML元素，ID和類，插件就可以工作。但是，如果我嘗試將所有必要的屬性添加到裸露的圖像標籤中，它就會消失。

理論：圖像標籤似乎消失時，雙方<ul>有一個id="etalage"（作爲插件部署方向決定），當<img>標籤具有各自的類指定它們作爲源和拇指的圖像。我的理論是有一些CSS「display：none」規則被調用，但如果這是真的，那麼不應該在頁面上工作的另一個例子也不起作用？

插件： Etalage上的代碼峽谷（我會發布的鏈接，但堆棧溢出告訴我，我太初級發佈多個鏈接）

錯誤示例頁： （註釋可以在檢查中看到）

我的代碼（即不工作），HTML：

<img id="thumbImage" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" />

的jQuery：

$(document).ready(function(){ 
$('#thumbImage').wrap('<ul id="etalage"><li /></ul>') 
.addClass('etalage_thumb_image') 
.after('<img class="etalage_source_image target" />'); $('.etalage_source_image') 
.attr('src', 'http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg'); 
});

根據Etalage，這是可以工作的代碼。

HTML

<ul id="etalage"> 
<li> 
<img class="etalage_thumb_image" src="xyz.jpg"> 
<img class="etalage_source_image target" src="xyz.jpg"> 
</li> 
</ul>

我迷茫。如果有人能提供幫助，我會提前感謝。我確實在他們的幫助論壇上發帖，但是SO在過去對我的代碼的調試非常有幫助。

來源

2013-07-24 Pat DePuydt

如果您在評論中添加額外的鏈接，則會有人編輯您的帖子並將其發佈給您。我同意，你所指的插件的鏈接是必要的。 – halfer

你會reword「coronate」，順便說一句嗎？ - 不確定你的意思。 – halfer

您是否知道，手工在javascript中創建元素（將元素作爲字符串鍵入）可能會引發奇怪的問題。 Javascript具有創建元素的內建函數'var div = Object.createElement（'div'）'並添加子元素：'div.appendChild（anotherElement）' – Epsil0neR

有兩個問題。

您正在使用ID在hoverZoomjquery.etalage.min.js腳本中應用插件。這意味着你正在注入第二個具有相同ID的DOM元素。 Ids應該是獨一無二的。我通過使id獨一無二地添加一個類「etalage」並使用$（「。etalage」）而不是$（「＃etalage」）來解決此問題。
您正在使用document.ready來執行DOM操作以及應用插件，除了它們是不同的文件。沒有任何保證，因爲經理會先發射。插件可以在實際注入DOM對象之前應用。我移動了調用，將插件應用於執行DOM操作的處理程序，以便在注入元素後確保它被調用。

我對「hacky」修復程序表示歉意，但它應該說明問題。這使代碼工作。

<!DOCTYPE html> 
<html> 
<head> 
    <title>iG Hoverzoom v1</title> 


    <link rel="stylesheet" type="text/css" href="http://igavelauctions.com/wp-content/themes/twentyeleven/css/hoverZoomEtalage.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

    <script type="text/javascript" src="http://igavelauctions.com/wp-content/themes/twentyeleven/js/hoverZoomjquery.etalage.min.js"></script> 

    <!--<script type="text/javascript" src="hoverZoomThumbWidths.js"></script>--> 

    <script type="text/javascript"> 
     $(document).ready(function() { 


      $('#thumbImage').wrap('<ul id="etalage2" class="etalage"><li></li></ul>').addClass('etalage_thumb_image').after('<img class="etalage_source_image target"/>'); 

      $('.etalage_source_image').attr('src', 'http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg'); 

      $('.etalage').etalage({ 
       thumb_image_width: 300, 
       thumb_image_height: 400, 
       source_image_width: 900, 
       source_image_height: 1200 
      }); 


     }); 
    </script> 


</head> 
<body> 


    <div> 
     <!-- Example of code that works --> 

     <ul id="etalage1" class="etalage"> 
      <li> 
       <img class="etalage_thumb_image" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg"> 
       <img class="etalage_source_image target" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg"> 
      </li> 
     </ul> 


    </div> 

    <div> 


     <!-- This is image tag that I'm trying to turn into Etalage through jQuery operators It disappears when the page is rendered. --> 
     <img id="thumbImage" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" /> 
    </div> 


</body> 


</html>

來源

2013-09-20 22:06:27

通過jQuery添加HTML元素導致Etalage插件中的錯誤（功能碰撞問題）

回答

相關問題