Нажмите прослушиватель событий для динамических / движущихся якорей - PullRequest
Новая
       16

Нажмите прослушиватель событий для динамических / движущихся якорей

0 голосов
/ 23 марта 2012

Я использую учебный плагин - 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>

Мой вопрос заключается в том, как вызвать событие click из тегов, прикрепленных к каждому шагу учебника. 

    <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>

Эти теги перемещаются между шагами с одинаковыми идентификаторами, поэтому, если я позвоню 

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

кнопка уже нажата, и функция не регистрируется.

Я не хочу редактировать файл tutorial.js, так как он используется на разных страницах. Есть ли что-то, что я могу сделать, чтобы «слушать» при нажатии «# tutorial-prev» и затем вызывать функцию, основанную на div, к которому он «присоединен»?

т.е. если щелкнуть «# tutorial-prev» при шаге обучения 3, сделать что-нибудь?

UPDATE:

После того, как я ненадолго отошел от него, я нашел более простое решение, которое заключается в простом использовании патча обезьяны для функций в скрипте и добавлении моего личного кода, состоящего из открытия / закрытия необходимого div.

Так это было похоже на 

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

Не совсем красиво, но быстрое решение для одной страницы, где мне нужно что-то настроенное.

Проблема, с которой я изначально столкнулся, заключалась в том, что якорные теги уже были удалены при запуске функции Next (), поэтому не было элемента для выполнения функции.

Ответы [ 3 ]

1 голос
/ 23 марта 2012

Я не уверен, что у меня есть четкое представление о том, чего вы пытаетесь достичь, но когда у вас есть обработчик кликов: 

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

При выполнении чего-либо вы можете повторить событие нажатия в любом месте: 

$(selector).trigger("click");
0 голосов
/ 03 апреля 2012

ОБНОВЛЕНИЕ:

После того, как я на некоторое время отошел от него, я нашел более простое решение, которое заключается в простом использовании патча обезьяны для функций в скрипте и добавлении моего личного кода, который состоит из открытия / закрытия требуемогоdiv.

Так что это было похоже на 

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

Не совсем красиво, но быстрое решение для одной страницы, где мне нужно что-то настраивать.

Проблема, с которой я столкнулся изначальночто теги привязки уже были удалены при запуске функции Next (), поэтому не было элемента для выполнения функции.

0 голосов
/ 23 марта 2012

с js, который вы опубликовали, вы привязываете событие click к каждой кнопке с помощью класса обучающей кнопки.

Вы можете дополнительно указать одну кнопку, используя идентификатор элемента, для которого вам нужно будет привязатьодин обратный вызов для каждой кнопки. 

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