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:
// Load this script once the document is ready
$(document).ready(function () {
         
    // Get all the thumbnail
    $('div.thumbnail-item').mouseenter(function(e) {
 
        // Calculate the position of the image tooltip
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;
 
        // Set the z-index of the current item, 
        // make sure it's greater than the rest of thumbnail items
        // Set the position and display the image tooltip
        $(this).css('z-index','15')
        .children("div.tooltip")
        .css({'top': y + 10,'left': x + 20,'display':'block'});
             
    }).mousemove(function(e) {
             
        // Calculate the position of the image tooltip          
        x = e.pageX - $(this).offset().left;
        y = e.pageY - $(this).offset().top;
             
        // This line causes the tooltip will follow the mouse pointer
        $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20 });
             
    }).mouseleave(function() {
             
        // Reset the z-index and hide the image tooltip 
        $(this).css('z-index','1')
        .children("div.tooltip")
        .animate({"opacity": "hide"}, "fast");{}
    });
 
});
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á:
<div class="thumbnail-item" >
<a href="#" ></a>								    <div class="tooltip">
<img src=" " alt="" width=" " height="" />											  <span class="overlay"></span>
</div>
</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:
jQuery.fn.imageTooltip = function () {
    // Get all the thumbnail  
    this.mouseenter(function(e) {  
   
        // Calculate the position of the image tooltip  
        x = e.pageX - $(this).offset().left;  
        y = e.pageY - $(this).offset().top;  
   
        // Set the z-index of the current item,   
        // make sure it's greater than the rest of thumbnail items  
        // Set the position and display the image tooltip  
        $(this).css('z-index','15')  
        .children("div.tooltip")  
        .css({'top': y + 10,'left': x + 20,'display':'block'});  
               
    }).mousemove(function(e) {  
               
        // Calculate the position of the image tooltip            
        x = e.pageX - $(this).offset().left;  
        y = e.pageY - $(this).offset().top;  
               
        // This line causes the tooltip will follow the mouse pointer  
        $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20 });  
               
    }).mouseleave(function() {  
               
        // Reset the z-index and hide the image tooltip   
        $(this).css('z-index','1')  
        .children("div.tooltip")  
        .animate({"opacity": "hide"}, "fast");{}  
    });
    return this;
};
Ezután kb így kell használni:
jQuery(function ($) {  
    // Get all the thumbnail  
    $('div.thumbnail-item').imageTooltip();
});
Nem tudom hogy szúrod be az elemeket a DOM-ba, de ami után, vagy közvetlen mielőtt beszúrod:
$(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 :
<div class="thumbnail-item" >  
<a href="#" ></a>
<div class="tooltip">  
<img src=" " alt="" width=" " height="" />                                              <span class="overlay"></span>  
</div>  
</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:
element6 = document.createElement("div");
element6.className = 'thumbnail-item';
element6.style.margin = '0px';
element6.style.padding = '2px';

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:
$(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.
element6 = $('<div class="thumbnail-item" >' +
  '<a href="#" ></a>'+
  '<div class="tooltip">'+
  '<img src="" alt="" width="" height="" />'+
  '<span class="overlay"></span>'+
  '</div>'+
  '</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!