У меня есть 2 файла index.html
и all.js
.
all.js
(function(){
if (document.getElementById('btn1')){
document.getElementById("btn1").addEventListener("click", displayMessage);
}
function displayMessage(){
alert("Hi!");
}
})()
index.html
Пример 1: - рабочий пример
<button id="btn1">Hit me !</button>
<script type="text/javascript" src="all.js"></script>
Пример 2: - нерабочий пример
<button id="btn2" onclick="show()">Show</button>
<script type="text/javascript">
function show(){
var btn = document.createElement("BUTTON");
btn.setAttribute("id", "btn1");
btn.innerHTML = "Hit me !";
document.getElementById("btn2");
document.body.insertBefore(btn, btn2);
}
</script>
<script type="text/javascript" src="all.js"></script>
Описание:
В первом примере btn1
был отображен сразу, и событие было привязано к нему. Во втором примере btn1
отображается только при нажатии на btn2
, и после этого, если вы нажмете btn1
, ничего не произойдет.
Как я могу прикрепить событие к btn1
без изменения all.js
?
Вот полный код репозиторий
Примечание. Не спрашивайте меня, почему я пытаюсь сделать что-то вроде этого, не спрашивайте меня, почему мне не разрешено изменять all.js
, потому что этот пример является упрощенным один, в моем случае all.js
файл содержит тысячи строк с большим количеством событий на многих элементах. Решение JavaScript означает, что мне не разрешено использовать другие внешние библиотеки.
ОБНОВЛЕНИЕ: принятие ответа
У меня появилось много разных ответов. Некоторые из вас усердно работали над решением этой проблемы, некоторые из вас работали меньше, но хорошо, что я решил. У меня есть некоторые рабочие решения, но некоторые из них работали только в этом конкретном случае, не принимая во внимание, что мой настоящий файл all.js имеет 4029 строк кода, некоторые решения предлагают использовать делегирование событий, которые я согласен, но, к сожалению, я не могу изменить все мои .js. В конце концов я выбрал лучшие решения, я также рассмотрел, кто ответил первым, я также принял во внимание, кто много работал над этим и т.д. В любом случае, решение, которое я собираюсь реализовать, - это слияние между 2 решения, решение Aruna и Vlacav (+ некоторые изменения самим собой), и вот он:
function show(){
var btn = document.createElement("BUTTON");
btn.setAttribute("id", "btn1");
btn.innerHTML = "Hit me !";
document.getElementById("btn2");
document.body.insertBefore(btn, btn2);
resetJs('all.js');
}
function resetJs(path) {
var scripts = document.getElementsByTagName('script')
, newScript = document.createElement("script");
newScript.src = path + "?timestamp=" + Math.round(new Date().getTime()/1000);
for (var i = 0; i < scripts.length; ++i) {
var srcUrl = scripts[i].getAttribute('src');
if (srcUrl && srcUrl.indexOf(path) > -1) {
scripts[i].parentNode.replaceChild(newScript, scripts[i]);
}
}
}
К сожалению, я не могу разделить репутацию, и я должен отдать ее только одному из них, и я хочу передать это Vlacav, потому что он был первым, кто опубликовал решение, которое я искал, и он также сделал некоторые изменения на нем, когда я попросил его сделать это. Я также оценил ответ Аруны, потому что он этого заслуживает.
Я разместил решение на отдельной ветке здесь, и я также создал несколько других ветвей на этом репо с другими решениями, которые я потому что они могут быть полезны в других ситуациях.