Jquery как заставить работать событие по нажатию на копку?

Question

[Tanya]

У меня есть сайт https://academy.remote-how.com/ при нажатии на кнопку в хедере открывается чат HubSpot и все ок, но мы сделали абсолютную копию этого сайта только на другую страницу https://academy.remote-how.com/test.html при нажатию на кнопку в хедере не открывает чат HubSpot только кидает на другую страницу
не могу понять в чем причина, много чего и банального пробовала и пыталась понять может что в коде не правильно, но вроде проблем никаких не должно быть.
Понимаю, что вопрос довольно нубский и может смешной кому-то, но хочу понять это проблема в том, что мне надо перегестрировать сам ХабСпот именно на эту страницу, а не на index.html либо что-то поменять внутри. Чую, что что-то не трудное, не могу найти, подскажите как новичку плиз!

Кусок кода в html
<script src="main.js"></script>в конце перед закрытием body

сама кнопка

<li class="navbar-item">
            <a href="" class="navbar-url btn btn-primary btn-pulse-primary hubspot-open">talk
              to advisor</a>
          </li>

кнопка чата

<a href="#" class="btn btn-medium btn-primary hubspot-open">
          Shoot us a message
        </a>

и код Jquery

// open hubspot chat
  $('.hubspot-open').on('click', function (e) {
    e.preventDefault();
    if (hubspot) {
      hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen();
    }
  })

})

Comments

[Stalker_RED]

кнопка </> в редакторе. Используй ее.

[ThunderCat]

Stalker_RED, Используй кнопку, Люк! )

[Tanya]

Stalker_RED, сорри, исправила
спасибо)

[Максим Тимофеев]

и код Jquery

там из воздуха возникает переменная hubspot

кроме этого откройте консоль, там куча ошибок, которые останавливают js и Ваш обработчик просто не срабатывает.

[Moses Fender]

Работает клик. hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen() работает же.

[Tanya]

Максим Тимофеев, да понимаю, но на сайте работает https://academy.remote-how.com/
код идентичен т.к. копировали с него

[Tanya]

Moses Fender, тут не работает https://academy.remote-how.com/test.html

Answer 1

[Tanya]

Спасибо всем кто пытался мне помочь!

Исправление ошибки оказлось довольно банальным, как оказалось, люди которые попросили поставить копию этого сайта все таки что-то меняли в html разметке и в одной программе которая сравнивает два куска кода между собой и показывает отличия, я нашла один полностью удаленный блок, которые содержал в себе критически важный класс как оказалось, я просто его добавила без контента и все заработало.
Самое странное, что для меня непонятно, это то, что таких было очень много, они просто содержали приставку bio_и_имя имена были разные, поэтому я не предавала этому значения, пока не сравнива и не попробовала добавить id именно с этим именем, и оно заработало
Я не эксперт по JS но с тех знаний, что есть, могу сказать, что для меня сомнительно, то, что в коде могли прописать эти id прямо по именно и по количественно, хотя...

Answer 2

[hzzzzl]

у меня и по первой ссылке ничего не открывает, потому что
main.js:47 Uncaught ReferenceError: hubspot is not defined



может быть какой-то скрипт забыли подключить, который определяет этот hubspot, или неправильно настроили?

Comments

[hzzzzl]

а окей, это мой адблокер не разрешает чат, сейчас еще попробую

[Tanya]

hzzzzl, дело в том, что оно работает на этом сайте с точно таким же кодом https://academy.remote-how.com/
а на этом https://academy.remote-how.com/test.html не хочет
я думала может пути надо исправить, но не помогло

[hzzzzl]

короче, хрен ее знает, но реально в этот коллбек jquery не заходит на /test, а на первой странице заходит :D

я подумал - а зачем вообще там a href="https://sso.teachable.com/secure/276487/users/sign_in" , если мы по клику все равно открываем чат? если поменять на a href="#" , например ...

[Tanya]

hzzzzl, тоже не поняла зачем, так решил видимо тот кто делал) если оставить просто # то ничего не происходит)

[hzzzzl]

знаешь короче что происходит, когда в main.js объявляются эти евент листенеры, то еще не существует этих элементов на странице, и поэтому они не регистрируются

потому что если на уже открытой и загруженной странице в консоли написать

$('.hubspot-open').on('click', function (e) {
    e.preventDefault();
    if (hubspot) {
      hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen();
    }
  })

то всё работает и чятик открывается

[Tanya]

hzzzzl, и правда, хм... странно, спасибо за помощь, буду колупать, что именно там не работает... Мне ранее указывало, что не подгружает это

jQuery(document).ready(function () {
  //tooltips
  $('[data-bio]').each(function () {
    new Tooltip($(this), {
      placement: 'top',
      title: document.querySelector($(this).attr('data-bio')).innerHTML, //$(this).attr('data-bio'),
      html: true
    });
  });

но идентификатор data-bio присутсвует

еще раз сорри если что тупое говорю, я просто только начала учить JS, и мне кинули типа на колупай, ранее я как-то быстро определяла ошибки и правила, а тут зависла

[hzzzzl]

Tanya, я откровенно плохо знаю как работает jQuery
вот так точно должно сработать, но это возможно немного перебор

document.body.addEventListener('click', (e) => {
  // у кликнутого элемента есть класс .hubspot-open?
  if (e.target.classList.contains('hubspot-open')) {
    e.preventDefault();
    if (hubspot) {
      hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen();
    }
  }
})

[Tanya]

hzzzzl, через консоль работает, спасибо, сейчас буду пробовать вставлять в файл

[ThunderCat]

Tanya,

но идентификатор data-bio присутсвует

ошибку там давало на строке

title: document.querySelector($(this).attr('data-bio')).innerHTML,

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

[hzzzzl]

Tanya, только это вообще вне всех $(document)...blabla.. , сразу после document.addEventListener('DOMContentLoaded', function () { .... }

ну и если это оставлять, то убрать слушатель jQuery..on('click'), конечно
:)

[Tanya]

ThunderCat, а как это возможно исправить? потому что я если честно не совсем понимаю, у меня из js файлов в корневой папке только main.js ну и конечно библиотеки через test.html подклюены

[ThunderCat]

Tanya, например

console.log(document.querySelector($(this).attr('data-bio')).innerHTML);
console.log($(this).attr('data-bio').innerHTML);
console.log($(this).attr('data-bio'));

Скорее всего у вас там фигня какая-то, хотя на самом деле можно было нормально написать $(this).data('bio');

[Tanya]

jQuery(document).ready(function () {
  //tooltips
  $('[data-bio]').each(function () {
    new Tooltip($(this), {
      placement: 'top',
      title: document.querySelector$(this).data('bio')));.innerHTML, //$(this).attr('data-bio'),
      html: true
    });
  });

так вы имели ввиду?
заранее извиняюсь если тупанула

[Tanya]

ThunderCat, нашла еще такую ошибку через консоль

var B = /^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;
    w.Deferred.exceptionHook = function(t, n) {
        e.console && e.console.warn && t && B.test(t.name) && e.console.warn("jQuery.Deferred exception: " + t.message, t.stack, n) // пишет что ошибка тут
    }
    ,
    w.readyException = function(t) {
        e.setTimeout(function() {
            throw t // и тут
        })
    }
    ;

но что-то не понимаю как оно связано

[hzzzzl]

Tanya, попробуй так (почти) без jquery

[...document.querySelectorAll('[data-bio]')]
	.forEach(span => {   // для каждого
		new Tooltip($(span), {
      		placement: 'top',
      		// вылавливаем Inner html элемента на странице по селектору "data-bio=#имя-элемента"
      		title: document.querySelector(span.dataset.bio).innerHTML, 
      		html: true
		})
   	})

[Tanya]

hzzzzl, оно почему-то все время ругается на innerHTML

[hzzzzl]

Tanya, а попробуй поменять в main.js
jQuery(document).ready(function () { ... }
на

$(window).on('load', () => {
// сюда ведь код эти data-bio и hubspot
})

по идее window.load должен сработать позже чем document.ready

[Tanya]

hzzzzl, сама ошибка с inner убралась на локалке, на хосте буду пробовать, спасибо большое! Надеюсь оно заработает, жаль сейчас проверить не могу...

[Tanya]

hzzzzl, еще заметила, что если в консоль вбивать так:

$(window).on('load', () => {
  //tooltips
  $('[data-bio]').each(function () {
    new Tooltip($(this), {
      placement: 'top',
      title: document.querySelector($(this).attr('data-bio')).innerHTML, //$(this).attr('data-bio'),
      html: true
    });
  });

  // scroll to pricing block
  $('[href="#pricing"]').on('click', function (e) {
    e.preventDefault();
    $([document.documentElement, document.body]).animate({
      scrollTop: $("#pricing").offset().top
    }, 750);
  })
})

без ХабСпота
а сам ХабСпот отдельно

document.body.addEventListener('click', (e) => {
  // у кликнутого элемента есть класс .hubspot-open?
  if (e.target.classList.contains('hubspot-open')) {
    e.preventDefault();
    if (hubspot) {
      hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen();
    }
  }
})

то оно работает
а если вбить просто целый кусок кода, то не работает

$(window).on('load', () => {
  //tooltips
  $('[data-bio]').each(function () {
    new Tooltip($(this), {
      placement: 'top',
      title: document.querySelector($(this).attr('data-bio')).innerHTML, //$(this).attr('data-bio'),
      html: true
    });
  });

  // scroll to pricing block
  $('[href="#pricing"]').on('click', function (e) {
    e.preventDefault();
    $([document.documentElement, document.body]).animate({
      scrollTop: $("#pricing").offset().top
    }, 750);
  })

  // open hubspot chat
  document.body.addEventListener('click', (e) => {
  // у кликнутого элемента есть класс .hubspot-open?
  if (e.target.classList.contains('hubspot-open')) {
    e.preventDefault();
    if (hubspot) {
      hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen();
    }
  }
})
})

Answer 3

[Stalker_RED]

if (hubspot) { ... }

А если не? Переменная hubspot не объявлена.

Answer 4

[Максим Тимофеев]

и код Jquery

там из воздуха возникает переменная hubspot

кроме этого откройте консоль, там куча ошибок, которые останавливают js и Ваш обработчик просто не срабатывает. И как следствие ссылка работает как и должна.

Answer 5

[ThunderCat]

Для этого в хроме есть инспектор, откройте обе странички, сделайте инспект на этот линк в обоих открытых страницах, во вкладке "евент листенерс" посмотрите что повешено на события клик в одном и в другом случае(думаю разница будет очевидна).

Comments

[Tanya]

смотрела, оно все идентично было

[ThunderCat]

Silvanassss, нет.

[Tanya]

ThunderCat, имею ввиду, что сам код идентичен, но я не понимаю почему возникает подобна ошибка:
Uncaught TypeError: Cannot read property 'innerHTML' of null
at HTMLSpanElement. (main.js:31)
at Function.each (jquery-3.3.1.min.js:2)
at w.fn.init.each (jquery-3.3.1.min.js:2)
at HTMLDocument. (main.js:28)
at l (jquery-3.3.1.min.js:2)
at c (jquery-3.3.1.min.js:2)

Хотя скопирован без правок

[hzzzzl]

ThunderCat, а я методом тыка понял, что этот main.js почему-то подгружается, когда DOM еще не готов, и поэтому евент листенеры не регистрируются (элементы еще не существуют) --- но как это по-простому решить это я не могу придумать

[ThunderCat]

hzzzzl, для этого вообще то есть $(function(){...})

[ThunderCat]

Tanya,

я не понимаю почему возникает подобна ошибка:

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

[Tanya]

ThunderCat, регестрировать через $? то есть так не правильно:
jQuery(document).ready(function () {
?

[ThunderCat]

Tanya, Все евенты всегда вешаются на готовый документ, если этого не делать то в 90% будут ошибки, так как скорость срабатывания скриптов будет выше скорости построения дом дерева(нужных элементов еще не будет). В вашем случае jQuery(document).ready(function () { это то же самое(только устаревшая нотация), но я не уверен что вы все на место вставили, подробно не смотрел.

Answer 6

[Павел]

Ни на первом, ни на втором не работает открытие чата по данной кнопке
Ищите переменную hubspot

Comments

[Tanya]

у вас блокер случайно не заблочил? потому что у меня по первому линку открывает

[Павел]

Tanya, нет, отключил на сайте