How to make html and javascript code reusable simultaneously?

Question

I just put my navbar html code to a separate reuse-able using jQuery plug-in. The html rendered well which is absolutely no problem.

However, the javascript code I wrote and put in a external/imported script file concerning the navbar dropdown content stopped working now!? @ @

This is the story:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script>
    $(function(){
        $('.navbar').load('reuseable.html');
    });
</script>
</head>
<body>

  <nav class="navbar">
   ...
  </nav>

...at the end of file: before body closing tag, I imported the js:

<script src="js/main.js"></script>

the js contains functions affecting navbar:

$(function() {
$('#dropbtn').mouseenter(function() {
    $('.dropdown-content').css('display', 'block');
});
$('#dropbtn').mouseleave(function(){
    $('.dropdown-content').css('display', 'none');
})

$('.dropdown-content').mouseover(function() {
    $('.dropdown-content').css('display', 'block');
});
$('.dropdown-content').mouseleave(function() {
    $('.dropdown-content').css('display', 'none');
});


//side-nav
$('#dropbtn-side').mouseover(function(){
    $('#dropdown-content-side').css('display', 'block');
});
$('#dropdown-content-side').mouseleave(function(){
    $('#dropdown-content-side').css('display', 'none');
});

});

Console errors?

Dean Wilson
– Dean Wilson

2019-10-22 02:55:58 +00:00
Commented Oct 22, 2019 at 2:55 — Dean Wilson
– Dean Wilson, Commented Oct 22, 2019 at 2:55

Alexander Nied · Accepted Answer · 2019-10-22 02:56:50Z

2

My hunch is that because your event listeners are looking for the elements before they have been added to the DOM they are not being found and no listener is being set. If you rewrite it using .on and delegating off the document then the dynamically added content should be properly listened to:

$(function() {
    $(document).on('mouseenter', '#dropbtn', function() {
        $('.dropdown-content').css('display', 'block');
    });
    $(document).on('mouseleave', '#dropbtn', function() {
        $('.dropdown-content').css('display', 'none');
    })

    $(document).on('mouseover', '.dropdown-content', function() {
        $('.dropdown-content').css('display', 'block');
    });
    $(document).on('mouseleave', '.dropdown-content', function() {
        $('.dropdown-content').css('display', 'none');
    });


    //side-nav
    $(document).on('mouseover', '#dropbtn-side', function() {
        $('#dropdown-content-side').css('display', 'block');
    });
    $(document).on('mouseleave', '#dropdown-content-side', function() {
        $('#dropdown-content-side').css('display', 'none');
    });
});

I didn't make any other improvements/changes-- you also could consider leveraging a better parent to delegate from, depending on what your markup looks like.

answered Oct 22, 2019 at 2:56

Alexander Nied

13.8k4 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andy Yang Over a year ago

This is prompt and beautiful solution bro! Thanks so much

Collectives™ on Stack Overflow

How to make html and javascript code reusable simultaneously?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related