ugrás a tartalomhoz

appendChild()-al beillesztett elemre nem működik a a guberált jQuery pluginom

reagenross · 2011. Már. 4. (P), 15.52
Sziasztok,

Guberáltam egy jQuery image tooltip plugint, amely jól működik azokra az elemekre, amelyek a HTML fában voltak már az oldal letöltődésekor. De amikor egy tooltippelni kívánt elemet appendChild()-al illesztek az oldalba(jQuery hez egyáltalán nem értek) akkor a jQuery mintha már nem látná ezt az elemet, a plugin nem működik rá.

Hogyan tudom elérni, hogy az appendelt elemet is lássa a pluginem?
‹ CKEditor -ba CKFinder NicEdit - Nem küld semmi adatot az sql-nek a textarea ha a nicedit be van illesztve ›
 ■
1

Esetleg kódot mutatnál?

pinguka · 2011. Már. 4. (P), 15.56
Esetleg kódot mutatnál?
2

A jQuery pluginok úgy szoktak

bb0072 · 2011. Már. 4. (P), 16.23
A jQuery pluginok úgy szoktak inicializálódni, hogy $('.akarmi').myPlugin();, tehát jelen esetben az akarmi osztályú elemek tömbjén végigmegy, és végrehajtja rajtuk egyenként a myPlugin() függvényt. Ha jön egy új elem a DOM-ba, azon nem hajtódik végre, hacsak végre nem hajtod. Pl: $(new_object).myPlugin();
3

Ez a pluginem kódja:// Load

reagenross · 2011. Már. 4. (P), 18.59
Ez a pluginem kódja:
  1. // Load this script once the document is ready  
  2. $(document).ready(function () {  
  3.            
  4.     // Get all the thumbnail  
  5.     $('div.thumbnail-item').mouseenter(function(e) {  
  6.    
  7.         // Calculate the position of the image tooltip  
  8.         x = e.pageX - $(this).offset().left;  
  9.         y = e.pageY - $(this).offset().top;  
  10.    
  11.         // Set the z-index of the current item,   
  12.         // make sure it's greater than the rest of thumbnail items  
  13.         // Set the position and display the image tooltip  
  14.         $(this).css('z-index','15')  
  15.         .children("div.tooltip")  
  16.         .css({'top': y + 10,'left': x + 20,'display':'block'});  
  17.                
  18.     }).mousemove(function(e) {  
  19.                
  20.         // Calculate the position of the image tooltip            
  21.         x = e.pageX - $(this).offset().left;  
  22.         y = e.pageY - $(this).offset().top;  
  23.                
  24.         // This line causes the tooltip will follow the mouse pointer  
  25.         $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20 });  
  26.                
  27.     }).mouseleave(function() {  
  28.                
  29.         // Reset the z-index and hide the image tooltip   
  30.         $(this).css('z-index','1')  
  31.         .children("div.tooltip")  
  32.         .animate({"opacity": "hide"}, "fast");{}  
  33.     });  
  34.    
  35. });  
Azt csinálja, hogy "thumbnail-item" osztályú divekben lévő img-get jelenít meg a kurzor mellett, kicsinyített alakban, ez a html kell hozzá:
  1. <div class="thumbnail-item" >  
  2. <a href="#" ></a>                                   <div class="tooltip">  
  3. <img src=" " alt="" width=" " height="" />                                              <span class="overlay"></span>  
  4. </div>  
  5. </div>  
Sajnos teljesen tapasztalatlan vagyok a jQueryvel, meg tudnád mutatni, hogy hogyan hívjam az új HTML elememre a fenti plugint? Eddig így próbáltam de nem működött:

element7.onmouseover = "$('div.thumbnail-item').mouseenter(function(e)";
4

Nem plugin

Poetro · 2011. Már. 4. (P), 19.13
A fenti nem jQuery plugin, ugyanis akkor kb. így nézne ki:
  1. jQuery.fn.imageTooltip = function () {  
  2.     // Get all the thumbnail    
  3.     this.mouseenter(function(e) {    
  4.      
  5.         // Calculate the position of the image tooltip    
  6.         x = e.pageX - $(this).offset().left;    
  7.         y = e.pageY - $(this).offset().top;    
  8.      
  9.         // Set the z-index of the current item,     
  10.         // make sure it's greater than the rest of thumbnail items    
  11.         // Set the position and display the image tooltip    
  12.         $(this).css('z-index','15')    
  13.         .children("div.tooltip")    
  14.         .css({'top': y + 10,'left': x + 20,'display':'block'});    
  15.                  
  16.     }).mousemove(function(e) {    
  17.                  
  18.         // Calculate the position of the image tooltip              
  19.         x = e.pageX - $(this).offset().left;    
  20.         y = e.pageY - $(this).offset().top;    
  21.                  
  22.         // This line causes the tooltip will follow the mouse pointer    
  23.         $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20 });    
  24.                  
  25.     }).mouseleave(function() {    
  26.                  
  27.         // Reset the z-index and hide the image tooltip     
  28.         $(this).css('z-index','1')    
  29.         .children("div.tooltip")    
  30.         .animate({"opacity": "hide"}, "fast");{}    
  31.     });  
  32.     return this;  
  33. };  
Ezután kb így kell használni:
  1. jQuery(function ($) {    
  2.     // Get all the thumbnail    
  3.     $('div.thumbnail-item').imageTooltip();  
  4. });  
Nem tudom hogy szúrod be az elemeket a DOM-ba, de ami után, vagy közvetlen mielőtt beszúrod:
  1. $(element).imageTooltip();  
7

DOMNodeInserted

Karvaly84 · 2011. Már. 5. (Szo), 03.33
Hello!

Szabványos böngészők támogatják a DOMNodeInserted eseményt! ami akkor váltódik ki egy elemen ha bővül a DOM struktúrája, viszont a Explorer nem támogatja.
5

Sehogy sem jó sajnos :S. Na

reagenross · 2011. Már. 4. (P), 21.28
Sehogy sem jó sajnos :S. Na mindegy azért köszönöm a válaszokat.
6

Adj támpontot

Poetro · 2011. Már. 4. (P), 22.47
Amíg nem adsz több segítséget, hogy hogyan használod, addig nem tudunk többet segíteni.
8

Létrehozom az alábbi elemeket

reagenross · 2011. Már. 5. (Szo), 13.06
Létrehozom az alábbi elemeket és tulajdonságaikat createElement()-el :
  1. <div class="thumbnail-item" >    
  2. <a href="#" ></a>  
  3. <div class="tooltip">    
  4. <img src=" " alt="" width=" " height="" />                                              <span class="overlay"></span>    
  5. </div>    
  6. </div>    
appendChild()-al beillesztem a létrehozott elemeket a DOM-ba :
- az <a> elem szülője a <div class="thumbnail-item" >
- a <div class="tooltip"> szülője a <div class="thumbnail-item" >
- az <img> szülője a <div class="tooltip">
- a <span> szülője a <div class="tooltip">

Tehát pl:
  1. element6 = document.createElement("div");  
  2. element6.className = 'thumbnail-item';  
  3. element6.style.margin = '0px';  
  4. element6.style.padding = '2px';  
  5.   
  6. element2.appendChild(element6); //element2 itt egy külső div amibenaz egész tárolva //van  
És ezt megcsinálom az összes elemre. Eztuán kellene valamivel kiváltanom, hogy amikor a az element6 fölé viszem az kurzort, előhozza az image thumbnailt. Mint ahogyan teszi akkor, amikor a fenti HTML már leöltődéskor is a DOM ban van, tehát nem dinamikusan adtam hozzá.
9

amikor létrehozod

Poetro · 2011. Már. 5. (Szo), 14.12
Akkor amikor létrehozod az eleme, akkor kell alkalmazni rá a plugint. Ekkor a valódi pluginnél maradva, amit fentebb írtam:
  1. $(element6).imageTooltip();  
De az után, hogy hozzáadtad az element2-höz.
Bár ha már úgyis jQuery-t használsz, egyszerűbb azzal létrehozni az elemeket, mint bűvészkedni a DOM függvényekkel.
  1. element6 = $('<div class="thumbnail-item" >' +  
  2.   '<a href="#" ></a>'+  
  3.   '<div class="tooltip">'+  
  4.   '<img src="" alt="" width="" height="" />'+  
  5.   '<span class="overlay"></span>'+  
  6.   '</div>'+  
  7.   '</div>').appendTo(element2).imageTooltip();  
10

$(element6).imageTooltip();

reagenross · 2011. Már. 5. (Szo), 17.53
$(element6).imageTooltip(); <<< így nem működött.

A második megoldás, amikor jQueryvel lett létrehozva az element6, kitűnően működik. Köszönöm a megoldást!