Jquery загружен контент с кнопкой не работает - PullRequest
Новая
       25

Jquery загружен контент с кнопкой не работает

0 голосов
/ 27 апреля 2018

Я пытаюсь заставить кнопку работать внутри внешнего html. Я использую Jquery .load('external.html #id-of-div');.

Я также пытался просто поместить "alert("comments");" во внешний файл, но он никогда не запускался.

Вот мой скрипт для кнопки загрузки внешнего HTML: (из внутреннего основного HTML) 

$('#button').on('click', function () {
  $('#container').css({'display': 'block'});
  $('#container').load('external.html' #external-id-of-div);
});

Также из (из внутреннего основного html) скрипта для вызова кнопки во внешнем html 'more-info'; эта кнопка «дополнительная информация» вложена в # external-id-of-div 

$('.more-info').click(function(){
    if(toggle = 2) {
        $('.full-copy').slideDown(400, function() {
            $(this).removeClass('disappear');
        });
        console.log("one");
        return toggle = 1;
    }
});
$('.full-copy').click(function(){
    if(toggle = 1) {
        $(this).slideUp(500, function() { 
            $(this).addClass('disappear');
        });
        console.log("two");
        return toggle = 2;
    } 
});

HTML-код выглядит следующим образом: (из внутренний основной html) 

<span id="button">Click to Load External Content</span>
<div id="container"></div>

html выглядит следующим образом: (из external main html) My Problem Я также поместил тег alert, который также не запускается при загрузке из internal html, но alert работает нормально, если просматривается как отдельный файл external . 

<div id="external-id-of-div">
    <span class="more-info">Click to expand More INFO</span>
    <div class="full-copy disappear">
           LOREM IPSUM COPY>>>
    </div>
    <script type="text/javascript">
        alert("Outside the jQuery ready");
        $(function() {
            alert("Inside the jQuery ready");
        });
    </script>
</div>

CSS: 

.disappear { display: none; }

Не уверен, что не так ...

Я ценю любые ответы, которые могут помочь, и заранее благодарю, ура!

1 Ответ

0 голосов
/ 27 апреля 2018

Прежде всего 

load('external.html' #external-id-of-div);

должно быть 

load('external.html #external-id-of-div');

А пока вы используете .load(), вам потребуется Привязка событий к динамически создаваемым элементам? 

$(document).on('click','.more-info',function(){
// And
$(document).on('click','.full-copy',function(){
...