Как реализовать ненавязчивый JavaScript с генерацией динамического контента?

Question

Я пишу много динамически сгенерированного контента (разрабатывается на PHP) и использую jQuery для придания большей гибкости и функциональности моим проектам.

Дело в том, что довольно сложно добавить JavaScript ненавязчивым способом. Вот пример:

Вы должны сгенерировать случайное количество div элементов, каждый с различной функциональностью, вызванных onClick. Я могу использовать атрибут onclick в моих div элементах для вызова функции JS с параметром, но это просто плохое решение. Также я мог бы сгенерировать некоторый код jQuery вместе с каждым div в моем цикле PHP for, но опять же это не будет полностью незаметным.

Так, каково решение в подобных ситуациях?

Answer 1

Вам нужно добавить что-то в div, которое определяет тип их поведения, затем использовать jQuery, чтобы выбрать эти div и добавить поведение. Одним из вариантов является использование атрибута класса, хотя, возможно, это следует использовать для представления, а не для поведения. Альтернативой может быть атрибут rel, но я обычно нахожу, что вы также хотите указать разные CSS для каждого поведения, так что в этом случае, вероятно, класс.

Так, например, давайте предположим, что вам нужно нечетное и четное поведение:

<div class="odd">...</div>
<div class="even">...</div>
<div class="odd">...</div>
<div class="even">...</div>

Тогда в jQuery:

$(document).load(function() {
$('.odd').click(function(el) {
// do stuff
});
$('.even').click(function(el) {
// dostuff
});
});

jQuery имеет очень мощный механизм выбора, который может найти на основе любого селектора на основе CSS, а также поддерживает некоторые XPath и свои собственные селекторы. Узнай их! http://docs.jquery.com/Selectors

Answer 2

Я бы порекомендовал вам использовать эту вещь под названием " Делегирование событий ". Вот как это работает.

Итак, если вы хотите обновить область, скажем, div и хотите незаметно обрабатывать события, вы присоединяете обработчик событий к самому div. Используйте любые рамки, которые вы предпочитаете делать. Вложение в событие может произойти в любое время, независимо от того, обновили вы div или нет.

Обработчик событий, прикрепленный к этому div, получит объект события в качестве одного из аргументов. Используя этот объект события, вы можете определить, какой элемент вызвал событие. Вы можете обновлять div любое количество раз: события, сгенерированные дочерними элементами div, будут пузыриться до div, где вы сможете их ловить и обрабатывать.

Это также оказывается огромной оптимизацией производительности, если вы думаете о подключении нескольких обработчиков ко многим элементам внутри div.

Answer 3

Я бы порекомендовал игнорировать стандарты W3C и выписать HTML-свойства для элементов, к которым необходимо прикрепить обработчики:

Примечание: это не нарушит отображение страницы!

<ul>
    <li handler="doAlertOne"></li>
    <li handler="doAlertTwo"></li>
    <li handler="doAlertThree"></li>
</ul>

Объявить несколько функций:

function doAlertOne() { }
function doAlertTwo() { }
function doAlertThree() { }

А затем с помощью jQuery так:

$("ul li").each(function ()
{
    switch($(this).attr("handler"))
    {
        case "doAlertOne":
            doAlertOne();
            break;

        case ... etc.
    }
});

Будьте прагматичны.

Answer 4

Я на самом деле не знаю о JQuery, но я знаю, что инструментарий DOJO делает возможным очень ненавязчивый Javascript.

Взгляните на пример здесь: http://dojocampus.org/explorer/#Dojo_Query_Adding%20Events

Демонстрация динамически добавляет события в чисто HTML-таблицу на основе классов.

Другим примером являются особенности поведения, описанные здесь: http://dojocampus.org/content/2008/03/26/cleaning-your-markup-with-dojobehavior/

Answer 5

Сложно сказать по вашему вопросу, но, может быть, вы можете использовать разные селекторы jQuery для настройки различных режимов нажатия? Например, скажем, у вас есть следующее:

<div class="section-1">
    <div></div>
</div>
<div class="section-2">
    <div></div>
</div>

Возможно, вы могли бы сделать следующее в jQuery:

$('.section-1 div').onclick(...one set of functionality...);
$('.section-2 div').onclick(...another set of functionality...);

По сути, в зависимости от контекста принимается решение о том, что должно произойти. Вы также можете выбрать все элементы div и проверить некоторые родительские или дочерние элементы, чтобы определить, какие функции они получают.

Мне нужно было бы узнать больше об особенностях вашей ситуации, чтобы дать более целенаправленный совет, но, возможно, это поможет вам начать.