使用javascript或jquerry将事件添加到特定标记

我有一个简单的HTML5视频播放器,我添加了时间线标记。

我想在特定的标记中添加一个事件,例如点击播放另一个视频或显示另一个div或文本,

以下是我到目前为止的情况

 var video = videojs('video1');
    //load markers
    video.markers({

        markers: [{
                time: 7,
                class: "first_step_circle"
            },
            {
                time: 16,
                text: "is",
                class: "second_step_circle"
            },
            {
                time: 23.6,
                text: "so"
            },
            {
                time: 28,
                text: "cool"
            }
        ]
    });

 $('.second_step_circle').on('click', function(){
        openPopUp('.persona2PopUp');
        console.log(openPopUp('.persona2PopUp'))
    })

这是我想给我的视频播放器看的div

<div class="lightbox persona2PopUp">
    <img src="images/Matt.jpg">
    <h5>Matt Briscoe</h5>
    <p>Role: Developer</p>
    <p>Bio: Matt has been a manager for 4 years. This alkjdlas asldkjasldj aslkdj aklsdjlsakdjalskjd salkdj salkjd</p>
    <p>Previous Experiences</p>
    <ul>
        <li>Experience 1: 2002-2004</li>
        <li>Experience 2: 2005-2009</li>
        <li>Experience 3: 2010-2016</li>
    </ul>
</div>

当我用名字检查班级时 second_step_circle 在DOM中它是可用的,但当我单击“什么都没有发生”时,这里是videojs marker的文档 videojs marker .

我需要改变什么才能得到我想要的?