jQuery newsticker add new list onclick not working properly

  html, javascript, jquery, news-ticker

I’m using this plugin, Acmeticker.

It’s working good. Now I tried to add more list using button .add to add Breaking News 9 at the last of ul. But it’s not working as expected. It show together with another li if I click button add, and if I click button more than one it show me duplicate Breaking News 9.

$('.my-news-ticker-3').AcmeTicker({         type:'typewriter',/*horizontal/horizontal/Marquee/type*/
            direction: 'right',/*up/down/left/right*/
            speed:50,/*true/false/number*/ /*For vertical/horizontal 600*//*For marquee 0.05*//*For typewriter 50*/
            controls: {
                prev: $('.acme-news-ticker-prev'),/*Can be used for horizontal/horizontal/typewriter*//*not work for marquee*/
                toggle: $('.acme-news-ticker-pause'),/*Can be used for horizontal/horizontal/typewriter*//*not work for marquee*/
                next: $('.acme-news-ticker-next')/*Can be used for horizontal/horizontal/marquee/typewriter*/
            }
        });


$('.add').on('click', function()
{
  $(".my-news-ticker-3").append('<li><a href="#">Breaking News 9</a></li>');
});
<link href="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/css/style.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/news-ticker-controls-acme/assets/js/acmeticker.js"></script>

<h2>Typewriter</h2><div class="acme-news-ticker">
    <div class="acme-news-ticker-label">Horizontal News</div>

    <div class="acme-news-ticker-box">
        <ul class="my-news-ticker-3">
            <li><a href="#">Breaking News 1</a></li>
            <li><a href="#">Breaking News 2</a></li>
            <li><a href="#">Breaking News 3</a></li>
            <li><a href="#">Breaking News 4</a></li>
            <li><a href="#">Breaking News 5</a></li>
            <li><a href="#">Breaking News 6</a></li>
            <li><a href="#">Breaking News 7</a></li>
            <li><a href="#">Breaking News 8</a></li>
        </ul>

    </div>
    <div class="acme-news-ticker-controls acme-news-ticker-horizontal-controls">
        <span class="acme-news-ticker-arrow acme-news-ticker-prev"></span>
        <span class="acme-news-ticker-pause"></span>
        <span class="acme-news-ticker-arrow acme-news-ticker-next"></span>
    </div>
    
<button class="add">Add</button>

Source: Ask Javascript Questions

LEAVE A COMMENT