Javascript: Dynamiquement créé des éléments HTML faisant référence à un objet instancié

(Pour des informations plus loin, cela se rapporte à la même pièce de travail en tant que previous question)Javascript: Dynamiquement créé des éléments HTML faisant référence à un objet instancié

Je crée un système de discussion en ligne basé de l'aide de JavaScript jQuery pour rendre la vie beaucoup plus facile. Tout le code JavaScript du webchat est dans un fichier js externe, qui est ensuite référencé et instancié par la page 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>

En JavaScript, il est code pour créer dynamiquement une liste des membres de chat actifs d'une requête JSON. Ce code crée une série de DIVs html, puis injecte ce html dans le DIV 'QuestionsList' présent dans le HTML.

Maintenant, voici la question :)

Au sein de chaque question sont des éléments avec JavaScript onclick événements qui permet des actions à prendre contre la question indiquée. Comment puis-je créer le code onclick sans coder en dur la référence à «webchat» - existe-t-il un moyen élégant et acceptable?

Mes premières pensées doivent passer le nom d'instance de l'instance « webchat » lors de sa création, il peut alors être utilisé dans le JavaScript lors de la création JavaScript dynamique ...

Exemple de code avec disque référence codée instantited « 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>

Source

2009-04-22 Peter Bridger

Le nom de l'instance changera-t-il? Quel est le problème avec 'hardcoding' le nom d'instance de webchat si vous savez qu'il sera toujours instancié avec le handle 'webchat'? – KyleFarris

Je ne peux pas le voir changer - je suppose que je pose cette question du point de vue des bonnes pratiques. –

Merci pour votre tout le monde d'entrée, j'ai décidé de passer au nom d'instance du Webchat quand instanciation il:

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

Puis dans le code JavaScript Je référençant le passé dans référencé lors de la construction dynamique html avec JavaScript:

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

Source

2009-04-24 08:49:45

Votre description est un peu en profondeur et je l'espère, que je suivais correctement, mais il me semble que vous êtes t en attachant un ou plusieurs événements de clic à tous les éléments ainsi qu'à tous les éléments qui seront créés dans le futur. Plutôt que de spécifier l'événement onclick lors de la création, vous devez utiliser la nouvelle fonctionnalité jQuery de jQuery 1.3+ qui vous permet de spécifier un événement pour chaque élément qui correspond au sélecteur ... même les éléments futurs comme ceux que vous allez ajouter via json.

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

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

Source

2009-04-22 19:35:35

Bien que je pense que l'idée en direct fonctionnera très probablement pour vous, ma pensée initiale était de créer un div modèle dans les étapes initiales du code, puis utiliser le clone (true) méthode pour créer des copies dynamiques du modèle et de ses méthodes. Ensuite, dans la "boucle" javascript, chaque copie peut être personnalisée au besoin avant d'être ajoutée au DOM.

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

Source

2009-04-23 03:52:12 Jim

Javascript: Dynamiquement créé des éléments HTML faisant référence à un objet instancié

Répondre

Questions connexes