Jquery loaded content with button not working

Question

I am trying to have a button work inside a external html. I am using Jquery .load('external.html #id-of-div');.

I also have tried to simply place an "alert("comments");" inside the external file but it is never fired.

Here is my script for button to load external html: (from internal main html)

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

Also from (from internal main html) a Script to call for a button inside the external html 'more-info'; this 'more-info' button is nested inside #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;
    } 
});

The html is the following: (from internal main html)

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

The html is the following: (from external main html) My Problem I also have placed a alert tag which also is not fired when loaded from internal html but alert works fine if previewed as the external file individually.

<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; }

Not sure what is wrong...

I appreciate any answers that may help and thank you in advance, cheers!

score 0 · Answer 1 · answered Apr 27 '18 at 05:44

First of all

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

should be

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

And while you're using .load() you'll need to Event binding on dynamically created elements?

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

Jquery loaded content with button not working

1 Answers1