Проблема кеширования в динамически добавляемом коде javascript - PullRequest
Новая
       3

Проблема кеширования в динамически добавляемом коде javascript

0 голосов
/ 31 марта 2020

У меня есть div на моей странице HTML: 

<div id="dynamicScript"></div>

Я генерирую динамический c JS код для операции размытия текстового поля: 

var dynamicScriptText = `$(document).on('click','#${id}',function(){alert();});`;

Сейчас Я создал скрипт, используя JS. Но я сначала удаляю сценарий, если он уже существует, а затем заново создаю его с идентификатором динамического c и добавляю его в мой dynamicScript DIV: 

        var id = "ControlTool10706547031";
        var elem = document.getElementById("script" + id);
        if(elem){
            elem.parentNode.removeChild(elem);
        } 
        var script;
        script = document.createElement('script');
        script.type = 'text/javascript';
        script.id = "script" + id;
        script.innerHTML = dynamicScriptText;
        var dynSc = document.getElementById('dynamicScript');
        dynSc.appendChild(script);

Этот код генерирует следующий вывод при проверке элемента в Chrome DevTools: 

<div id="dynamicScript">
    <script type="text/javascript" id="scriptControlTool10706547031">
         $(document).on('click','#ControlTool10706547031',function(){alert();});
    </script>
</div>

Здесь #ControlTool10706547031 - кнопка, и при нажатии на нее я пытаюсь показать предупреждение. Но проблема в размытии текстового поля, хотя я каждый раз удаляю сценарий с помощью следующего кода перед повторным его добавлением: 

var elem = document.getElementById("script" + id);    
if(elem){
         elem.parentNode.removeChild(elem);
}

он каким-то образом кэширует сгенерированный код JS и, если я 5 раз запустите операцию размытия текстового поля, когда я нажму кнопку #ControlTool10706547031, 5 раз появится предупреждение, хотя при проверке элемента в Chrome DevTools: 

<div id="dynamicScript">
    <script type="text/javascript" id="scriptControlTool10706547031">
         $(document).on('click','#ControlTool10706547031',function(){alert();});
    </script>
</div>

Этот код отображается один раз.

1 Ответ

1 голос
/ 31 марта 2020

Вы можете использовать .off() метод здесь. Метод .off() удаляет обработчики событий, которые были присоединены с .on(). Вызов .off() без аргументов удаляет все обработчики, прикрепленные к элементам. Обработчики событий Specifi c могут быть удалены для элементов путем предоставления комбинаций имен событий, пространств имен, селекторов или имен функций обработчиков, таких как: 

`$(document).off('click','#${id}').on('click','#${id}',function(){alert();})`;
...