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

问题描述 投票:1回答:3

(为进一步的背景,这与previous question涉及同一作品)>

我正在创建一个使用jQuery的基于JavaScript的网络聊天系统

,使生活变得更加轻松。所有的Webchat 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”的引用进行硬编码-是否有一种优雅而可以接受的方式?

我最初的想法是在创建'webchat'实例时传入实例名称,以便在创建动态JavaScript时可以在JavaScript内部使用它。

具有实例化'webchat'的硬编码引用的代码示例:

<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>

((为进一步的背景,这与上一个问题涉及相同的工作)我正在使用jQuery创建基于JavaScript的网络聊天系统,以使生活更加轻松。所有的网络聊天...

javascript jquery json events dom
3个回答
1
投票

虽然我认为,实际想法很可能对您有用,但我最初的想法是在代码的初始阶段创建模板div,然后使用clone(true)方法创建模板及其模板的动态副本。方法。然后,在javascript“循环”中,可以根据需要自定义每个副本,然后将其附加到DOM中。

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


0
投票

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


0
投票

感谢大家的投入,我决定在实例化时传递Webchat的实例名称:

© www.soinside.com 2019 - 2024. All rights reserved.