0

Update: Everyone that contributed, it's well appreciated, you all are very kind and generous and all of you deserve my dear respect. Cheers.

Note: I'm making a simple jQuery tooltip plugin, the tooltip will fire on mouseover. The mouseover will create an instance of the div tool-tip that will be specific to each anchor that launched the div tool-tip. So each anchor with the class .c_tool will have its own created div that will erase after mouseout. Anyway all those details are irrelevant. What is important is how to create a div with .append() or .add() on and then find a way to call it and apply actions to that div without setting an identifier (id), class, or any means to identify it.

I know theres a way you could find the div by counting, so if you gave every created div the same class and then counted them to find that one, however I don't know if this is the most efficient method that is why I'm asking for help.

I'm not going to post the whole plugin script thats unnecessary, so I'll paste a simplified version.

<a href="#" class="c_tool">hover me</a>
<a href="#" class="c_tool">hover me</a>

$(document).ready(function() {

    obj = $('a.c_tool');
    obj.mouseover(function() {

        /// append div to body it will be specific to each item with class c_tool, however I don't want to set an ID, or CLASS to the appended div

    }).mouseout(function() {

        /// remove added div without setting ID or class to it.
    });

});
2
  • are you talking about that div which you will show on mouse-over of anchor?
    – Vivek
    Jan 25, 2011 at 8:18
  • jQuery should create a div dynamically for each anchor from scratch. Then remove it when the mouseout fires for that anchor.
    – kr1zmo
    Jan 25, 2011 at 8:21

3 Answers 3

3

Working example:

http://jsfiddle.net/xzL6F/

$(document).ready(function() {

    var tooltip;

    obj = $('a.c_tool');
    obj.mouseover(function() {
        var element = $('<div>', {
             html:   "I'm a tooltip"
        });

        tooltip = element.appendTo($("body"));


        /// append div to body it will be specific to each item with class c_tool, however I don't want to set an ID, or CLASS to the appended div

    }).mouseout(function() {
        tooltip.remove();
        /// remove added div without setting ID or class to it.
    });

});
1
  • This works, but what if I threw a curve ball at you, and said I wanted to do click events with mouseovers, so when an anchor is clicked it creates and instance of a div, and then when its clicked again it removes the div. That div should stay up, while other anchors that our mouseover fired ones still work.
    – kr1zmo
    Jan 25, 2011 at 8:24
2

To create a new DOM node you can use the jQuery constructor, like

$(document).ready(function() {
    obj = $('a.c_tool');

    obj.mouseover(function() {
        if(!$.data(this, 'ref')) {
            $.data(this, 'ref', $ref = $('<div>', {
                 html:   'Hello World!'
            }).appendTo(document.body));
        }
    }).mouseout(function() {
        $.data(this, 'ref').remove();
    });
});

.appendTo() returns the DOM node of invocation (in this case, the newly created DIV) as jQuery object. That way you can store the reference in a variable for instance and access it later.

Referring your comment:
To remove all stored references, you should do this:

$('a.c_tool').each(function(index, node) {
    $.removeData(node, 'ref');
});
4
  • its a plugin in so multiple anchors will be firing at the same time. How would this effect the variable. It wouldn't reset every time the mouseovers where fired would it?
    – kr1zmo
    Jan 25, 2011 at 8:20
  • @kr1zmo: I updated the answer. The reference is now stored at each anchor individually via the $.data method.
    – jAndy
    Jan 25, 2011 at 8:22
  • Andy lets say for some reason I would need to remove all instances of divs we created in $.data(this, 'ref') all at the same time, How would I do that?
    – kr1zmo
    Jan 25, 2011 at 10:47
  • @kr1zmo: updated. I also updated the code to add a new <div>, so newly created divs don't overwrite old references.
    – jAndy
    Jan 25, 2011 at 11:43
0
you can use $.append(


);

http://api.jquery.com/append/

and to find the DOM created dynamically u can use

$("#dynamicallyCreatedDOMid").live("yourCustomTrigger",function(){


});

http://api.jquery.com/live/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.