Обратный вызов jQuery qTip не работает

Question

У меня вызывается qTip для элементов в таблице..

$('#orders_table a[rel]').each(function (){
            $(this).click(function(){
                return false;
            }); 
            $(this).qtip({
                content: {
                    // Set the text to an image HTML string with the correct src URL to the loading image you want to use
                    text: 'Loading...',
                    url: $(this).attr('rel'),
                    // Use the rel attribute of each element for the url to load
                    title: {
                        text: 'Order Number ' + $(this).text(),
                        // Give the tooltip a title using each elements text
                        button: 'Close' // Show a close link in the title
                    }
                },
                position: {
                    corner: {
                        target: 'bottomMiddle',
                        // Position the tooltip above the link
                        tooltip: 'topMiddle'
                    },
                    adjust: {
                        screen: true // Keep the tooltip on-screen at all times
                    }
                },
                show: {
                    when: 'click',
                    solo: true // Only show one tooltip at a time
                },
                hide: 'unfocus',
                style: {
                    tip: true,
                    // Apply a speech bubble tip to the tooltip at the designated tooltip corner
                    border: {
                        width: 0,
                        radius: 4
                    },
                    name: 'light',
                    // Use the default light style
                    width: 570 // Set the tooltip width
                }
            })
        });

Затем у меня есть следующая функция обратного вызова:

$('#orders_table a[rel]').each(function (){

            $(this).qtip({
            api: {
                onContentLoad:function() {
                        $('#select').change(function(){

                                alert('test');
                        });    
                }
            }                         
            })
        });

QTip загружает динамический контент. Этот динамический контент имеет поле выбора с идентификатором "выбрать".

По какой-то причине, похоже, не вызывается функция ПОСЛЕ того, как qTip загрузил динамический контент.

Есть идеи? Я пробовал onRender и onContentUpdate, которые не подходят.

Спасибо!

Answer 1

На самом деле нужны разные средства, разные ID для разных контролей. Так что Попытка с другим идентификатором означает передачу некоторого аргумента и изменение идентификатора при динамическом создании элемента управления.

Это может решить вашу проблему.

Answer 2

Я не уверен на 100%, если это та же проблема, что и у нас, но когда вы устанавливаете якорь для qTip на ajax-ссылку, и эта ajax-ссылка запускает повторный рендеринг самой себя, qTip в конечном итоге становится без корня в DOM и обратные вызовы и таймеры просто перестают работать.

Мы решили это путем привязки qTip к ближайшему элементу. Надеюсь, это поможет.

Answer 3

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

Вы можете сделать это, изменив свой выбор, чтобы иметь класс (или нет, если это единственный <select> в содержании), вот так:

<select class="mySelect">

Затем при связывании найдите этот элемент в обратном вызове, например так:

$('#orders_table a[rel]').each(function (){
  $(this).qtip({
    api: {
      onContentLoad:function() {
        this.elements.content.find('select.mySelect').change(function() {
          alert('test');
        });    
      }
    }                         
  });
});

Также, если вам не нужно .each() цикл по другой причине, вы можете сократить его до:

$('#orders_table a[rel]').qtip({
  api: {
    onContentLoad:function() {
      this.elements.content.find('select.mySelect').change(function() {
        alert('test');
      });    
    }
  }
});