повторное использование js-скриптов

[batazor]

У меня такой вопрос, как заставить работать сторонние скрипты, которые отвечают к примеру за визуальное отображение(подсветка кода), скрипты работают при обычном обновлении страницы, но как их применить к данным полученным с помощью ajax? Достаточно близкая проблема рассматривается здесь http://toster.ru/q/63544
Ошибок в консоли нет, я смог подключить события с помощью метода .on() но как быть со сторонними плагинами я не знфаю...

[danik.js]

Больше конкретики. Какой скрипт конкретно интересует? Как получены данные - через аякс или через хуякс - это абсолютно не важно.

[batazor]

К примеру как поступить в данной ситуции
скрипт не применяется к вновь добавленным элементам

[batazor]

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

[danik.js]

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

Да, вариант. Только как избежать повторной обработки уже обработанных элементов? В jQuery плагинах для этого используется реестр data, реализованный jQuery. Думаю будет ок, если просто устанавливать свое свойство прямо на DOM-элементе. Хотя лучше тогда устанавливать data-атрибут.

[batazor]

Тоже думал про повторную обработку, ваш способ не совсем понял, что именно делать с атрибутами? При использовании скрипта добавлять новый атрибут(метку) и при повторном вызове применять только к тем у кого нет метки? Или можно наоборот, удалять метку при применении скрипта и в последующем применить только к тем у кого есть этот атрибут? Или есть какой то более эффективный метод? Если можно по подробней, или как вариант сможете поделиться ссылкой на статью, теорию?

[danik.js]

поделиться ссылкой на статью

Да какая ссылка. Можно сделать иначе. Передавать в функцию только нужные элементы. То есть при первой загрузке обработать все элементы на странице, а затем - передавать только подгруженные.

Ну типа:

process(document.querySelectorAll('.radio'));

loadSomeThing(function(html){}
    var element = document.createElement('div');
    element.innerHTML = html;
    process(element.querySelectorAll('.radio'));
    document.body.appendChild(element);
});

[batazor]

что то не пойму до конца, как мне следует изменить js код

// Допустим эта функцмя применяеться к html
function ggg () {
  $('li').addClass('add');
}

// Получаем элементы к которым надо применить функцию
process = document.querySelectorAll('.container li');

ggg(); // для тех элементов что были при загрузке страниуы

// не важно как, добавляем новый элемент
$('button').click(function(e){
  $('ul').append('<li><input id="cb'+$("li").length+'" type="checkbox">123</li>');
  ggg(); // и для новых и для старых
});

при таком html

<form>
<ul>
<li><input id="cb0" type="checkbox">123</li>
<li><input id="cb1"  type="checkbox">123</li>
</ul>
<button>Добавить</button>
</form>

[krasovsky]

Судя по вашему коды -вы добавляете li класс add, потом вставляете еще li И добавляете ему класс add.
В таком случае совершенно пофиг, и ничего не надо даже проверять.

А вы попробуйте не класс добавлять а вешать например:

.on('click',function(){
alert('alert!!!');
})

И поймете - после каждого навешивания клика "новые" Li будут вызывать 1 алерт а "старые" на 1 больше чем в предыдущий раз!

но если изменить ggg():

function ggg () {
 var li = $('li'); //берем Li
 li.each(function(){//либо цикл for
  if (!$(this).hasClass('hasHandle')) {//проверяем еслть ли у li класс hasHandle
    $(this)..on('click',function(){
       alert('alert!!!');
    }).addClass('hasHandle')// и если этого класса нет вешаем обработчик и добавляем класс чтоб больше не вешать на него лишнего
  }
 }
}

Вот как то так. А чтоб повторно использовать код сторонних плагинов надо как минимум представлять что они делают, как работают ну и для началу разобраться в js на некотором уровне.

[batazor]

Спасиб, пойду учить js