conflict between multiple js files in wordpress install?

Question

Im really clueless on this. Im working on a Wordpress site for a friend and he gave me a free theme to use. Off course he wants modification so I'm editing the theme. The theme uses multiple js includes, three of them are bootstrap.min.js , app.js and jquery.placeholder.min.js Now I'm including a dynamic bootstrap carousel in the frontpage, it words flawlessly except for the next-prev arrows to go to the next or previous slide! the controls are meant to be setup something like this:

        <!-- Controls -->
        <a class="left carousel-control" href="#boost-carousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#boost-carousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>

where the href is the ID of the carousel (double checked 100rds of times, they match)

I tried to track down the problem and found undoing the jquery.placeholder.min.js include fixes it and makes it work. however, this leaves this line $('input, textarea').placeholder(); useless in app.js so I thought, well let's remove that and save, this breaks it again...... when either of the arrows is clicked, the page just navigates to the #boost-carousel , Bootstrap's js is supposed to fix this.

This kind of conflict (I guess it is?) is completely new for me and I hope you guys can point me in a direction for a fix (-:

Thanks!

EDIT 01 Manually triggering them like this works:

$('a[data-slide="prev"]').click(function() {
  $('#boost-carousel').carousel('prev');
});

$('a[data-slide="next"]').click(function() {
  $('#boost-carousel').carousel('next');
});

However, I would still like to how this can happen so any feedback would be awesome!

EDIT 02 Leaving out app.js fixes the problem as well, I'll dig trough that file tomorrow or later in the week to find a more specific problem. In the meantime any suggestions are welcome. Thanks!

Edit 03 I did some digging in the app.js file and found this piece of code:

$(window).load(function () {
    function filterPath(string) {
        return string.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '');
    }
    $('a[href*=#]').each(function () {
        if (filterPath(location.pathname) == filterPath(this.pathname) && location.hostname == this.hostname && this.hash.replace(/#/, '')) {
            var $targetId = $(this.hash),
                $targetAnchor = $('[name=' + this.hash.slice(1) + ']');
            var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;

            if ($target) {

                $(this).click(function () {

                    //Hack collapse top navigation after clicking
                    topMenu.parent().attr('style', 'height:0px').removeClass('in'); //Close navigation
                    $('.navbar .btn-navbar').addClass('collapsed');

                    var targetOffset = $target.offset().top - 63;
                    $('html, body').animate({
                        scrollTop: targetOffset
                    }, 800);
                    return false;
                });
            }
        }
    });
});

It does some modification on the links, hence the reason why commenting this out fixes the issue. Does anybody have any idea what it is for specifically?

ps why is my question downvoted? It's okay, but I would like to know why so I can mind it for my next question. Just downvoting does not help anybody right?

Answer 1

It looks like your app.js script adds a click handler to all anchor links ( href="#…" ), to provide some sort of “smooth scroll” functionality – and that seems to interfere with the bootstrap carousel functionality.

If you are willing to modify this script, then it would probably be easiest to change the selection of links it works on to exclude the ones used to navigate the carousel – something like this perhaps:

$('a[href*=#]').each(function () {
    // if (filterPath(location.pathname) == filterPath(this.pathname) && location.hostname …
    // add "filter" to exclude links with href=#boost-carousel
    if ( […same conditions as above…] && this.hash != '#boost-carousel')