使用 OOP 创建带有事件的 HTML 对象的更好方法 [关闭]答案

【问题标题】：Better way to use OOP to create HTML objects with events [closed]使用 OOP 创建带有事件的 HTML 对象的更好方法 [关闭]
【发布时间】：2013-01-10 17:42:49
【问题描述】：

我的网络应用程序需要能够从 SQL 数据库中提取信息并根据这些信息创建对象。这些是需要点击事件（以及与之相关的其他方法）的 HTML 元素。

我目前在做什么：

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'
    })
}

更新： 有没有更好的方法来创建具有事件的 HTML div，或者这是一种有效、充分的方法？ javascript对象需要在数组中创建吗？

【问题讨论】：

我不确定问题是什么。
也许这是那些过于模糊的问题之一。如果是这样，我会把它拿下来。我是自学成才的，我试图弄清楚是否有已知的方法可以动态地创建带有事件的 html 对象，因为必须已经创建了 div 才能添加事件。这就是我想出的。
你使用的是jQuery，所以答案是肯定的；这是图书馆的基本功能。
听起来您实际上是在问一个关于将事件附加到与这些对象关联的 DOM 元素的问题，而不是真正创建对象本身的问题。话虽如此，听起来您在询问事件委托。我会使用 jQuery 的内置功能（或者看看我对这个关于委托的问题的回答：stackoverflow.com/questions/14258787/…）
这可能行得通。我需要用户能够创建新对象，并且我需要这些对象具有 HTML GUI 并具有事件和 jQuery 交互，例如 draggable()。查看更新，了解我认为基于其他 cmets 可能会更好的工作

标签： javascript jquery html oop

【解决方案1】：

如果您的所有新元素都在单击时执行相同的操作，您可能应该只从某个父元素委托单击事件而不是在创建时附加它，这可能会更容易。

例如：

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

【讨论】：

我遇到的问题是，当动态创建新对象时（想想在 facebook 中添加帖子），他们需要事件，但我每次创建新对象时都会执行 $('.Foo').click(function(){...}); 之类的操作创建后，我最终只需单击一次即可多次触发相同的事件。每次创建新对象时，它都会继续绑定另一个点击事件。
@DougMead 查看我的更新。
这仍然会产生在创建新对象时将多个点击事件添加到相同对象的问题。也许这样的事情会更好？（在对象外设置事件，但特定于当前ID）fooA = new Foo(); selectorA = fooA.getSelector(); $(document).on('click',selectorA,function(e){});
@DougMead 嗯？您只需要委托一次。不要多次这样做......
Neal 有一点，但是如果你多次注册同一个处理程序，根据 jQuery 规范，它会忽略重复的绑定。我可能弄错了。