Question

（有关更多背景知识，这涉及与previous question相同的工作）

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

<html xmlns="http://www.w3.org/1999/xhtml">

WebchatV3

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

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

Answer 1

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

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

Answer 2

您的描述有点深入，我希望我能正确地遵循它，但在我看来，您正试图将点击事件附加到所有项目以及所有项目中将来创建。您应该使用jQuery 1.3+中出现的新jQuery功能，而不是在创建时指定onclick事件，该功能允许您为与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中我引用了在用它动态构建html时引用的传入：

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

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

3 个答案: