Есть ли способ вызвать функцию начальной загрузки внутри кнопки или ссылки?

Я хотел бы вызвать функцию начальной загрузки, когда пользователь нажимает кнопку или ссылку с идентификатором "#tip-back-btn-1"

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

Я хотел бы использовать что-то вроде этого:

<button class = "tip-skip-button" id = "tip-back-btn-1" onclick = "tour.goTo(0);">Back</button> 

я пытался вызвать

$("#tip-back-btn-1").click(function() {
    tour.goTo(0);
});

Но это не работает

Мой код начальной загрузки приведен ниже для справки.

    'use strict';

        $(function () {
            var steps = [];
            var leadIndex = 0;
            function gensteps(index, div, message, placement, template) {

                var id = $(div).attr('id');

                if (id === undefined) {
                    //$(body).attr('id', 'id_' + leadIndex + '_' + index);
                    id = $(div).attr('id');
                }
                var step = {
                    element: '#' + id,
                    content: message,
                    placement: placement,
                    template: template,
                    backdropElement: '#client-activated-update-client-info'
                };
                steps.push(step);
            }


            leadIndex++;
            $('#contain').each(function (index, div) {
                var template = '<div class = "popover" role = "tooltip"> <div class = "arrow"></div> <div class = "popover-content"></div> <div class = "popover-navigation"> <div class = "btn-group-custom"> <button class = "tip-skip-button" id = "tip-back-btn-1">Back</button> </div> <button class = "tip-exit" data-role = "end">Exit</button> </div> </div>';
                gensteps(index, div, '<h3 class = "tool-tip-title">Address</h3>\n    <div class = "tip-content">\n    <p>lorem ipsum dolet</p>\n </div>\n ', 'top',template);
            });


            $("#tip-back-btn-1").click(function() {
                tour.goTo(1);
            });



            var tour = new Tour({
                steps: steps
            });tour.init();
            tour.start(true);
            tour.goTo(0);


    });

Я думаю, проблема в том, что мой код кнопки подсказки определен слишком рано, а элемент DOM с идентификатором «кнопка» еще не существует. Или, может быть, весь мой код тура еще не загрузился.

Попробуйте заменить $("#tip-back-btn-1").click(function() на $("document").on("click", "#tip-back-btn-1", function().

Obsidian Age 29.01.2019 22:37

@ObsidianAge Спасибо за предложение. Я пробовал этот метод раньше, но что, если я хочу использовать несколько идентификаторов и вызывать несколько функций.

Spanky 29.01.2019 22:46

Я не совсем понимаю, о чем вы спрашиваете; это изменение просто использует делегирование событий. Это решает проблему? И вы всегда можете иметь только две линии, например $("document").on("click", "#tip-back-btn-1", function1() ... и $("document").on("click", "#tip-back-btn-1", function2() .... Не забывайте, что вы всегда можете использовать селекторы классов или передать целевой элемент в саму функцию :)

Obsidian Age 29.01.2019 22:48

@ObsidianAge Я не знал, что вы можете использовать $("document").on несколько раз в документе.

Spanky 29.01.2019 23:00

@ObsidianAge На самом деле ваше предложение работает для меня! Спасибо!

Spanky 29.01.2019 23:04
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
53
1

Ответы 1

вы можете попробовать определить его вне функции

var tour = new Tour();
    $(function () {
tour = new Tour({
                steps: steps
            });tour.init();
            tour.start(true);
            tour.goTo(0);
}

надеюсь решит вашу проблему

Другие вопросы по теме