Javascript：動態創建的引用實例化對象的 html 元素

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>

Answer 1

雖然我認為這個想法很可能對你有用，但我最初的想法是在代碼的初始階段創建一個模板 div，然后使用 clone(true) 方法創建模板及其方法的動態副本。 然后在 javascript“循環”中，每個副本都可以在被附加到 DOM 之前根據需要進行自定義。

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

Answer 2

您的描述有點深入，我希望我正確地遵循它，但在我看來，您正在嘗試將點擊事件附加到所有項目以及將在其中創建的所有項目未來。 而不是在創建時指定 onclick 事件，您應該使用 jQuery 1.3+ 中出現的新 jQuery 功能，該功能允許您為與 Selector 匹配的每個元素指定一個事件......甚至是未來的元素，例如您將添加的元素通過 json。

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

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

Answer 3

感謝大家的輸入，我決定在實例化時傳入 Webchat 的實例名稱：

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

然后在 JavaScript 中，我引用了在其中使用 JavaScript 動態構建 html 時所引用的傳入：

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

Javascript：動態創建的引用實例化對象的 html 元素

問題描述

3 個解決方案

解決方案1
1 2009-04-23 03:52:12

解決方案2
0 2009-04-22 19:35:35

解決方案3
0 已采納 2009-04-24 08:49:45

Javascript：動態創建的引用實例化對象的 html 元素

問題描述

3 個解決方案

解決方案1 1 2009-04-23 03:52:12

解決方案2 0 2009-04-22 19:35:35

解決方案3 0 已采納 2009-04-24 08:49:45

解決方案1
1 2009-04-23 03:52:12

解決方案2
0 2009-04-22 19:35:35

解決方案3
0 已采納 2009-04-24 08:49:45