CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Julio
Julio

Reputation: 6368

How to bind events to dynamically created JQuery DOM elements

I'm having trouble referencing an object from within the plugin I'm attempting to make.

The plugin is assosciated with a div container.

When the dom is ready it loads in startup defaults - creates its own div with id's it knows and an un ordered list. I can add list items and they work correctly using $this.append(..). However I want to add a feature where a click on an individual list item does something.. for now alert will suffice.

Normally I would be able to do:

$("#myId").click(function(){...

How would i add such functionality to a plugin?

I want that action set by the plugin itself, so clicking on list items created by the plugin are already attached to some functionality which I have written into the jquery plugin.

Upvotes: 0

Views: 118

Answers (2)

Andomar
Andomar

Reputation: 238078

Based on your comment, you could store the new tab in a variable:

var newTab = $("<li id='tab#" + o.tabCount + "' myTabPane='" + 
    o.tabId + o.tabCount + "' class='tab'><h3>Tab " + o.tabCount
    + "</h3></li>");
$('#' + o.tabListId).append(newTab);
newTab.click(function() {
    var paneId = '#' + $(this).attr('myTabPane');
    $(paneId).siblings().hide();
    $(paneId).show();
});

Link to working example at jsfiddle.

By the way, your original script had the second ' in the wrong place:

$("<li id='tab#'" + o.tabCount + " class='tab'><h3>Tab "
              ^^^

Upvotes: 1

VulgarBinary
VulgarBinary

Reputation: 3589

You would want to reference them after doing the append by tag name not by ID.

$(this).find("li").click(function(){  /* do work */});

If you absolutely have to reference it by ID you can do:

$(this).find("li").each(function(){
   var id = $(this).attr("id");
   /* do work */
});

Upvotes: 1

Related Questions