Question

我正在使用教程插件 - http://particlebits.com/code/jquery-tutorial/

将此代码附加到您需要的教程步骤数量上。

<div for="tutstep4" data-target="#publishbutton" data-arrow="tc" data-location="tr" style="display: block; ">
       <h1>Almost Done!</h1>
       <p>
        Now click "Publish" and you are done.
        </p>
    </div>

我的问题是如何从附加到每个教程步骤的标记触发点击事件。

    <a id="tutorial-done" class="tutorial-button" href="javascript:void(0);" style="display: block; ">Done!</a>
<a id="tutorial-cancel" class="tutorial-cancel" href="javascript:void(0);">X</a>
<a id="tutorial-next" class="tutorial-button" type="button" href="javascript:void(0);" style="display: none; ">Next</a>
<a id="tutorial-prev" class="tutorial-button" type="button" href="javascript:void(0);" style="display: block; ">Prev</a>

如果我调用

，这些标签会在具有相同Id的步骤之间移动

$('.tutorial-button').click(function(){
do something
})

已单击该按钮且该功能未注册。

我不想编辑tutorial.js文件，因为它在不同的页面中使用。当点击'＃tutorial-prev'然后根据它附加的div调用函数时，我可以做些什么来“听”？

即。如果在教程步骤为3时单击“＃tutorial-prev”，那么执行某些操作？

更新：

离开它一段时间后，我找到了一个更简单的解决方案，只需在脚本中的函数上使用猴子补丁，并添加我自己的个人代码，其中包括打开/关闭所需的div。

所以就像

$.fn.tutorialNext() {
 // start of original next code.
 //end of original code.
 myfunc();
}

不完全漂亮但是我需要定制的一页的快速解决方案。

我最初遇到的问题是在运行Next（）函数时已经删除了锚标记，因此没有元素可以执行该函数。

Answer 1

我不确定我是否清楚你想要实现的目标，但是当你有点击处理程序时：

$("'#tutorial-prev").on("click", dosomething);

在做某事时，您可以随意复制点击事件：

$(selector).trigger("click");

Answer 2

使用您发布的js，使用tutorial-button类将click事件绑定到每个按钮。

您可以使用元素的id进一步指定一个按钮，您需要将一个回调绑定到每个按钮。

$('#tutorial-prev').click(function(){ //go to previous step });
$('#tutorial-next').click(function(){ //go to next step });
$('#tutorial-cancel').click(function(){ //cancel actions });
...

Answer 3

更新：

离开它一段时间后，我找到了一个更简单的解决方案，只需在脚本中的函数上使用猴子补丁，并添加我自己的个人代码，其中包括打开/关闭所需的div。

所以就像

$.fn.tutorialNext() {
 // start of original next code.
 //end of original code.
 myfunc();
}

不完全漂亮但是我需要定制的一页的快速解决方案。

我最初遇到的问题是在运行Next（）函数时已经删除了锚标记，因此没有元素可以执行该函数。

单击动态/移动锚点的事件侦听器

3 个答案: