Javascript：动态创建的引用实例化对象的 html 元素答案

【问题标题】：Javascript: Dynamically created html elements referencing an instantiated objectJavascript：动态创建的引用实例化对象的 html 元素
【发布时间】：2010-10-21 03:15:38
【问题描述】：

（关于更多背景知识，这与 previous question 的作品有关）

我正在使用 jQuery 创建一个 基于 JavaScript 的网络聊天系统，以使生活更轻松。所有的网络聊天 JavaScript 代码都在一个外部 js 文件中，然后被 html 页面引用和实例化。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>WebchatV3</title>
    <script type="text/javascript" src="/JavaScript/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="WebchatV3.js"></script>
    <link rel="stylesheet" href="WebchatV3.css" />
</head>

<body>
    <div id="WebchatSurround">
        <div style="float:right;width:300px;">
            <div id="MembersBox">
                Members
                <ul id="MembersList">
                </ul>
            </div>
            <div id="QuestionsBox">
                Questions
                <div id="QuestionsList">
                </div>
            </div>
        </div>

        <div style="margin-right:310px;" id="ChatBox">
            <div id="ChatData">
                <ul id="ChatDataList"></ul>
            </div>
            <div id="ChatInput">
                <div id="ChatInputCharRemainText">Characters remaining <span id="ChatInputCharRemain"></span></div>
                <input type="text" maxlength="1000" id="ChatInputTextbox" />
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var webchat;
        webchat = new AvonAndSomerset.WebchatV3(123, 'passcode', false);
    </script>
</body>
</html>

在 JavaScript 中，有一些代码可以根据 JSON 查询动态创建活动聊天成员列表。此代码创建一系列 html DIV，然后将此 html 注入 html 中的“QuestionsList”DIV。

现在问题来了:)

每个问题中都有带有 JavaScript onclick 事件的元素，允许针对显示的问题采取行动。如何在不对“网络聊天”的引用进行硬编码的情况下创建 onclick 代码 - 有没有一种优雅且可接受的方式？

我最初的想法是在创建“webchat”实例时传入它的实例名称，以便在创建动态 JavaScript 时可以在 JavaScript 中使用它...

硬编码引用实例化“网络聊天”的代码示例：

<div id="QuestionsBox">
    Questions
    <div id="QuestionsList">
        <div class="Question">
            <div class="QuestionInnerControls">
                <img src="images/arrow_up.png" alt="" class="ControlIcon" onclick="webchat.Questions.Move(1,1);" >
                <img src="images/arrow_down.png" alt="" class="ControlIcon" onclick="webchat.Questions.Move(1,-1);">
                <img src="images/delete.png" alt="" class="ControlIcon" onclick="webchat.Questions.Delete(1);">
            </div>
            <div class="QuestionInnerText">
                1) <b>Peter Bridger</b>: This is the question text
                <br style="clear: right;">
            </div>
        </div>
    </div>
</div>

【问题讨论】：

实例名称会改变吗？如果您知道将始终使用句柄“webchat”进行实例化，那么“硬编码”webchat 实例名称有什么问题？
我看不到它在改变 - 我想我是从良好实践的角度来问这个问题的。

标签： javascript jquery json events dom

【解决方案1】：

感谢大家的意见，我决定在实例化时传入 Webchat 的实例名称：

        var webchat;
            webchat = new AvonAndSomerset.WebchatV3(123, 'passcode', false , 'webchat' );

然后在 JavaScript 中，我在使用 JavaScript 动态构建 html 时引用传入的引用：

onclick="' + this.instanceName + '.popupMemberDetailsShow(' + this.Members.collection[i].memberId + ');

【讨论】：

【解决方案2】：

虽然我认为 live 的想法很可能适合你，但我最初的想法是在代码的初始阶段创建一个模板 div，然后使用 clone(true) 方法创建模板的动态副本并它的方法。然后在 javascript“循环”中，每个副本都可以根据需要进行自定义，然后再附加到 DOM 中。

http://docs.jquery.com/Manipulation/clone#bool

【讨论】：

【解决方案3】：

您的描述有点深入，我希望我正确地遵循它，但在我看来，您正在尝试将点击事件附加到所有项目以及所有将在未来被创造。与其在创建时指定 onclick 事件，不如使用 jQuery 1.3+ 中出现的新 jQuery 功能，它允许您为每个匹配 Selector 的元素指定一个事件......甚至未来的元素，如您将要添加的元素通过json。

 $("p").live("click", function(){
  $(this).after("<p>Another paragraph!</p>");
});

http://docs.jquery.com/Events/live

【讨论】：