Чтение значения текстового поля внутри qtip не работает в jQuery - PullRequest
Новая
       2

Чтение значения текстового поля внутри qtip не работает в jQuery

0 голосов
/ 23 июня 2010

Я загружаю jQuery qtip при наведении курсора (как это обычно работает).Внутри этого qtip есть текстовое поле и кнопка.По нажатию этой кнопки я хочу что-то сделать со значением этого текстового поля.Так или иначе, функция .val () jQuery возвращает мне начальное значение текстового поля.Где я ошибаюсь?

jQuery код: 

$(function() {
    $("#someplace").qtip({
        content: $("#popup"),
        hide: {
            fixed: true
        },
        position: {
            corner: {
                tooltip: 'topMiddle',
                target: 'bottomMiddle'
            },
            adjust: { 
                x:-30,
                y:-75
            }
        },
        style: {
        width:'100px',
            color:'white',
            name:'tspopup'
        }
    });

    $("#button_in_the_qtip").click(
        function () {
            var txt = $("#textbox_in_the_qtip").val();
            alert($("#textbox_in_the_qtip").attr('id')); // This returns "textbox_in_the_qtip"
            alert(txt); // This returns "abc" <---- Problem
        }
    );
});

HTML-код для всплывающего окна

1 Ответ

1 голос
/ 23 июня 2010

Я опробовал ваш код и думаю, что проблема может заключаться в используемой вами версии jQuery.Согласно сайту qTip вы должны использовать jQuery 1.3.2.Ваш код работает, когда вы используете более старую версию.

ОБНОВЛЕНИЕ:

Проблема в том, что вызов $("#button_in_the_qtip").click(...) влияет только на кнопку внутри элемента #popup div.Способ работы qTip заключается в том, что он фактически создает клон содержимого div и генерирует html для всплывающей подсказки, только когда вы наводите курсор на целевой элемент.в основном вам нужно добавить прослушиватель щелчков после создания qTip.

Чтобы исправить это, переместите функцию кнопок внутри обратного вызова qtip api onContentUpdate 

api: {
        onContentUpdate: function(){
            $("#button_in_the_qtip").click(function () {
                var txt = $("#textbox_in_the_qtip").val();
                alert($("#textbox_in_the_qtip").attr('id')); // This returns "textbox_in_the_qtip"
                alert(txt); // This returns "abc" <---- Problem
            });
        }

Единственный последний шаг - удаление#popup со страницы, что вы можете сделать прямо в опциях qtip 

content: $("#popup").remove(),

Это необходимо, потому что в противном случае на странице были бы дублирующиеся элементы с одинаковым идентификатором, а jQuery это не нравится.

...