IGreatlyDislikeJavascript / bootstrap-tourist

Quick and easy way to build your product tours with Bootstrap Popovers for Bootstrap 3 and 4. Based on Bootstrap-Tour, but with many fixes and features added.
63 stars 36 forks source link

$(...).stop is not a function? #68

Closed elleech closed 3 years ago

elleech commented 3 years ago

I wanted to start tour when clicking on the button. But every time I do that, it shows error of "$(...).stop is not a function" and the whole page goes dark. I wonder if anyone has encountered this issue.

image

I use jquery 3.3.1 and bootstrap 4.3.1 in my html as following code:

<head>
    <!-- Bootstrap 4.3.1 CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Bootstrap Tour CSS -->
    <link rel="stylesheet" href="./bootstrap-tourist/bootstrap-tourist.css" />
</head>

<body>
    <button class="btn btn-primary my-2" id="start">Start Demo</button>
    <h1 class="fw-light" id="pageTitle">Example Title</h1>
    <div class="lead text-muted" id="pageContent1">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, officiis. Tenetur soluta
           nulla doloribus eligendi sequi tempore alias, eos consequatur, accusamus blanditiis unde
           quod modi deserunt exercitationem odio pariatur suscipit.
        </p>
    </div>

    ...

    <!-- jQuery 3.3.1 -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>

    <!-- Bootstrap 4.3.1 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>

    <!-- Bootstrap Tourist -->
    <script src="./bootstrap-tourist/bootstrap-tourist.js"></script>

    <!-- Custom JS -->
    <script src="./demo.js"></script>
</body>

And js:

var tour = new Tour({
    framework: 'bootstrap4',
    steps: [{
        element: '#pageTitle',
        placement: "bottom",
        title: "Welcome to Bootstrap Tour!",
        content: "123"
    }, {
        element: '#pageContent1',
        placement: "bottom",
        title: "Welcome to Bootstrap Tour!",
        content: "123"
    }]
});

$("#start").click(function () {
    tour.start();
});
elleech commented 3 years ago

Error has gone when change jQuery to jquery-3.3.1.min.js