Javascript: динамически создаваемые HTML-элементы, ссылающиеся на экземпляр объекта - PullRequest
Новая
       36

Javascript: динамически создаваемые HTML-элементы, ссылающиеся на экземпляр объекта

1 голос
/ 22 апреля 2009

(Для дальнейшей информации это относится к той же части работы, что и предыдущий вопрос )

Я создаю систему веб-чата на основе JavaScript с использованием jQuery , чтобы сделать жизнь намного проще. Весь код 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 в DIV «QuestionsList», присутствующий в HTML.

Теперь вот вопрос:)

В каждом вопросе есть элементы с событиями JavaScript onclick, которые позволяют выполнять действия с отображаемым вопросом. Как я могу создать код onclick без жесткого кодирования ссылки на «webchat» - есть ли удобный и приемлемый способ?

Мои первоначальные мысли - передать имя экземпляра экземпляра '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>

Ответы [ 3 ]

1 голос
/ 23 апреля 2009

Хотя я думаю, что живая идея, скорее всего, будет работать для вас, моей первоначальной мыслью было создать шаблон div на начальных этапах кода, а затем использовать метод clone (true) для создания динамических копий шаблона и его методы. Затем в «цикле» javascript каждая копия может быть настроена по мере необходимости перед добавлением в DOM.

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

0 голосов
/ 24 апреля 2009

Спасибо за ваш вклад всем, я решил передать имя экземпляра чата при его создании: 

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

Затем внутри JavaScript, на который я ссылаюсь, передается ссылка, на которую ссылается при динамическом построении html-кода с JavaScript: 

onclick="' + this.instanceName + '.popupMemberDetailsShow(' + this.Members.collection[i].memberId + ');
0 голосов
/ 22 апреля 2009

Ваше описание немного углублено, и я надеюсь, что я правильно его выполняю, но мне кажется, что вы пытаетесь прикрепить событие (события) клика ко всем элементам, а также ко всем элементам, которые будут быть созданным в будущем. Вместо того, чтобы указывать событие onclick при создании, вы должны использовать новую функцию jQuery, которая появилась в jQuery 1.3+, которая позволяет вам указывать событие для каждого элемента, который соответствует селектору ... даже будущих элементов, таких как те, которые вы будете добавлять через JSON. 

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...