jQuery qtip не работает, но ошибки в консоли

Я застрял часами и не могу понять, почему. Что мне нужно реализовать, довольно просто, у меня есть несколько «tr», и каждый td имеет уникальное имя заголовков. Основываясь на имени заголовка, мне нужна подсказка для каждой ячейки «td». Я уже реализовал qtip, поэтому я знаю, как его настроить. Но проблема в том, что qtip вообще не работает, даже с простым контентом. Проводная вещь: в консоли нет сообщения об ошибке, поэтому я понятия не имею, ПОЧЕМУ.jQuery qtip не работает, но ошибки в консоли

Вот JS:

$(document).ready(function() { 

    var hoverElem = null; 
    $("table.confirmit-grid.borderseparate tbody tr td").on('click mouseover', function (e) { 
     hoverElem = this; 
     if ($(hoverElem).attr('headers') == 'non_import_header1') { 
      $(hoverElem).qtip({ 
       content: { 
        text: 'hello' 
       } 

      }); 
     } 

    });

И HTML часть находится в JSFiddle. http://jsfiddle.net/matildayipan/2yztzdgc/

Может ли кто-нибудь помочь мне? я действительно ценю это ~

источник

2014-10-02 Matilda Yi Pan

Кажется, что

$ ("table.confirmit-grid.borderseparate TBODY тр тд"). Длина

возвращает 0, так что QTIP является не применяется к любому элементу. Проблема возникает из-за точки в имени класса. Этого можно избежать, убегая точку в селекторе:

$("table.confirmit-grid\\.borderseparate tbody tr td")

В самом деле, вот как я бы написать его (нет необходимости переопределять событие нажмите/наведения мыши, что это делается автоматически с помощью QTIP функции):

$(document).ready(function() { 
var hoverElem = null; 
$("table.confirmit-grid\\.borderseparate tbody tr td").each(function(index) { 
    if ($(this).attr("headers") == "non_import_header1") { 
     $(this).qtip({ 
      content: { 
       text: 'hello' 
      } 
     }); 
    } 
});

[EDIT] Почему этот синтаксис работает:

Когда вы $("yourSelector").qtip({content:{text:"Hello !"}});, что он делает, это применить подсказку плагин для всех элементов, которые соответствуют селектору. Созданный конструктор плагинов выполняет всю работу для вас и создает правильные обработчики событий, поэтому вам не нужно делать это самостоятельно.

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

Обратите внимание, что в данном случае я использовал .each() из условия $(this).attr("headers") == "non_import_header1", но это было на самом деле ленивым меня, потому что я довольно уверен, что attribute condition может быть интегрирован в селекторном элементы коснуться так:

$("table.confirmit-grid\\.borderseparate tbody tr td[headers='non_import_header1']").qtip({ 
      content: { 
       text: 'Hello ! Yay for short code !' 
      } 
     } 
);

источник

2014-10-02 07:46:49 cmousset

Благодарим за то, что указали мою тупую ошибку. ~ Она работает сейчас, а также из-за "каждой" функции. Я не знаю, почему '.on (« click mouseover »function() {})' не работает, когда всплывающая подсказка появляется при нажатии или наведении указателя на элемент. Тем не менее, всплывающая подсказка появляется для '.each (function() {})' как щелчок или наведение указателя на элемент БЕЗ объявления о событиях ~ Не могли бы вы объяснить, почему, пожалуйста? Я действительно смущен. ~ Спасибо. –

@MatildaYiPan Я добавил несколько пояснений (и улучшение селектора). Скажи мне, если это прояснит это для тебя! – cmousset

Благодарим вас за подробное объяснение ~ Очень ценю. Я предполагаю, что qtip внутренне имеет обработчик события только для наведения курсора мыши или наведения. Итак, qtip был зарегистрирован в селекторе, и он будет запущен, когда элементы будут соответствовать селектору, а событие - HOVER или MOUSEOVER. Надеюсь, мое понимание правильное. ~ Еще раз спасибо. –

Вашего

$("table.confirmit-grid.borderseparate tbody tr td")

не дает какой-либо элемент в консоли и как ваш предыдущий селектор имел класс с. который будет рассматриваться как другой класс. Например Например myclass.anotherClass это даст этот элемент

<div class="myClass anotherClass">

Так что я изменить селектор

$ ("стол TBODY тр тд"). На ("клик", функция() {})

источник

2014-10-02 07:55:17

jQuery qtip не работает, но ошибки в консоли

ответ

Смежные вопросы