Загрузка скрипта по клику

187

19 марта 2019, 10:20

Предположим, есть кнопка button с id=btn и пустой <div id="emptydiv"> </div> на странице. По нажатию на кнопку загружается новый блок div на странице.

$('#btn').click(function(){
var str = "<div id="out"> </div>";
$('#emptydiv').html(str);
});

Затем я хочу уже в новый div с id=out вывести скрипт.

var scr = "<script>...</script>";
$('#out').html(scr);

Все это должно произойти по клику на button. Сейчас у меня скрипт загружается только при втором клике, при первом нет. Будто не находит #out на странице, как дождаться появления блока на странице и затем уже в него вывести?

Answer 1

Что Вам мешает вставить его сразу, в момент создания элемента #out? Просто вставьте текст скрипта прямо внутрь div Но если нужно именно так - тогда ниже добавьте $('#emptydiv').find('#out').html(str); Сразу после создания div#out

Суть в том что div#out это динамически созданный элемент и jquery не может его найти в Dom дереве

Answer 2

В общем как-то так..
А вообще не советую так делать, лучше функцией вызвать после клика..

$('#btn').on('click',function(){ 
  var block = '<div id="out">Govnokod</div>'; 
  var code = '&lt;script>console.info("govnocod activeted")&lt;\/script>'; 
  $('#emptydiv').append(block); 
  $('#emptydiv').find('#out').append(code.replace(/&lt;/g, '<')); 
});

#out {background: red; min-height: 20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<button id="btn">Go govnokod</button> 
 
<div id="emptydiv"> 
bla-bla-bla 
</div>