Better way to use OOP to create HTML objects with events

Question

My web app needs to be able to pull information from a SQL database and create objects based on the information. These are HTML elements that need click events (and other methods associated with them).

What I am currently doing:

function init() {
    //initially creates objects based on SQL database

    //user creates a new Foo
    fooA = new Foo({id: i, otherInfo: "..."});

    $(fooA.selector).click({...});
    $(fooA.selector).draggable({...});
    //etc.

    $(fooA.selector).appendTo('#topContainer');


function Foo(data) {
    this.id = data.id;
    this.html = "";
    this.selector = "#"+this.id;

    $('<div/>',{
        "class": "Foo",
        id: this.id,
        text: 'Blah blah blah'
    })
}

UPDATE: Is there a better way to create HTML div's that have events or is this an efficient, adequate way? And do javascript objects need to be created in an array?

Maybe this is one of those too vague questions. If so, I will take it down. I am self-taught in this and I am trying to figure out if there is known way to dynamically create html objects with events, since the div must be already created to add events. This is what I came up with. — Doug Mead, Jan 10 '13 at 17:48
You're using jQuery, so the answer is yes; it's a basic function of the library. — Pointy, Jan 10 '13 at 17:52
Sounds like you're really asking a question about attaching the events to the DOM elements associated with these objects, and not really about creating the objects themselves. That being said, sounds like you're asking about event delegation. I would use what's built in to jQuery (or else have a look at my answer to this question about delegation: http://stackoverflow.com/questions/14258787/add-event-listener-on-elements-created-dynamically/14259372#14259372) — founddrama, Jan 10 '13 at 17:55
That may work. I need the user to be able to create new objects and I need those objects to have an HTML GUI and have events and jQuery interactions such as draggable(). See update for what I think may work better based on other comments — Doug Mead, Jan 10 '13 at 18:17

Naftali · Answer 1 · 2013-01-10T17:58:41.273

1

It might be easier if all of your new elements are going to be doing the same thing on click that you should probably just delegate the click event from some parent element instead of attaching it when it is created.

For example:

$(document).on('click', '.foo', function(e){
    //do something when a .foo element is clicked on in the document
});

edited Jan 10 '13 at 17:58

answered Jan 10 '13 at 17:53

Naftali

144,921
39
244
303

The problem I run into with that is that when new objects are dynamically created (think adding a post in facebook) they need the events, but what I do something like `$('.Foo').click(function(){...});` every time a new object is created, I end up with one click triggering the same event multiple times. It keeps binding another click event every time a new object is created. – Doug Mead Jan 10 '13 at 17:57
this still gives the problem of adding multiple click events to the same objects when a new one is created. Maybe something like this would be better? (setting events outside the object, but specific to the current ID) `fooA = new Foo(); selectorA = fooA.getSelector(); $(document).on('click',selectorA,function(e){});` – Doug Mead Jan 10 '13 at 18:14
1

@DougMead huh? you only need to delegate **once**. Do not do it multiple times... – Naftali Jan 10 '13 at 18:15
Neal has a point, but if you register the same handler several times, according to the jQuery spec, it will ignore repeated bindings. I could be mistaken. – jcolebrand Jan 10 '13 at 18:19
@jcolebrand I do not think that is true. One element **can have** multiple click handlers associated with it. – Naftali Jan 10 '13 at 18:20
@Neal what I am referring to is this example: -three objects of class .foo are created and events are added to .foo -next, a user creates a fourth object of class .foo and events are added to .foo -now, when the user clicks one of the original 3 .foo objects, the click event is triggered twice.. because the click events were added twice – Doug Mead Jan 10 '13 at 18:25
@DougMead please make a fiddle demo to show what you mean... – Naftali Jan 10 '13 at 18:26
..just give me a few minutes. thank you – Doug Mead Jan 10 '13 at 18:30
@Neal this is what I am referring to. I think my update above fixes the problem.. but for your awareness: http://jsfiddle.net/YVTGf/ – Doug Mead Jan 10 '13 at 18:57
.... @DougMead elements should **not** have numeric IDs also they **Cannot** share IDs. IDs have to be unique. – Naftali Jan 10 '13 at 18:58
that was a typo. the problem still occurs: http://jsfiddle.net/YVTGf/ i think the way around it is to bind click events to the ID, not the class – Doug Mead Jan 10 '13 at 19:00
@DougMead you have 2 click handlers there... One sec ill give you a **correct** fiddle – Naftali Jan 10 '13 at 19:00
@DougMead here you go: http://jsfiddle.net/maniator/YVTGf/4/ using delegation and **all is well** :-) – Naftali Jan 10 '13 at 19:03
OK!! I understand what you are saying now. The problem when I did that was that once I created a new '.Foo' it did not have the event binded.. unless I put the statement in a second time. Is this something that jQuery fixed in a new version, or is this because you are using $(document).on() instead of $('.foo').click() ? – Doug Mead Jan 10 '13 at 19:15
Ok. I am done.... read my post. thank you. – Naftali Jan 10 '13 at 19:20

Better way to use OOP to create HTML objects with events

1 Answers1