JQuery не раз вызывал функцию - PullRequest
Новая
       33

JQuery не раз вызывал функцию

0 голосов
/ 11 февраля 2012

Я создаю мобильное приложение и вызываю функцию getItem, передавая значение data-trnote. 

function getTitles() {
    $(document).ready(function(e){
        var list = $('#recent'),
            items = [];
        $.mobile.notesdb.transaction(function(t) {
            t.executeSql('SELECT buildingcode, buildingaddress FROM buildings ORDER BY buildingaddress ASC', [], function(t, result) {
                var i,
                    len = result.rows.length,
                    row;
                if (len > 0 ) {
                    for (i = 0; i < len; i += 1) {
                        row = result.rows.item(i);
                        items.push('<li><a href="#display" data-trnote="' + row.buildingcode + '">' + row.buildingaddress + '........' + row.buildingcode + '</a></li>');
                    }
                    list.html(items.join('\n'));
                    list.listview('refresh');
                    $('a', list).live('click', function(e) {
                        getItem($(this).attr('data-trnote'));
                    });
                    $('#entries').show();
                } else {
                    $('#entries').hide();
                }
            })
        });
    });
}

код getItem выглядит следующим образом 

function getItem(buildingcode) {
alert(buildingcode);
    $(document).ready(function(){
        var list = $('#recentflats'),
            items = [];
        $.mobile.notesdb.transaction(function(t) {
            t.executeSql('SELECT buildingaddress, buildingcode FROM buildings WHERE buildingcode = ?',[buildingcode], function(t, resultbuilding) {
                var myrow;
                myrow = resultbuilding.rows.item(0);
                $('#display h1').text(myrow.buildingaddress);
            })
        });
        $.mobile.notesdb.transaction(function(t) {
            t.executeSql('SELECT DISTINCT flatdescription, flatname, buildingcode FROM bill WHERE buildingcode = ?',[buildingcode], function(t, resultflat) {
                var i,
                    len = resultflat.rows.length,
                    row;
                if (len > 0 ) {
                    for (i = 0; i < len; i += 1) {
                        row = resultflat.rows.item(i);
                        items.push('<li><a href="#displayflat" data-flat="' + row.flatname + '" data-description="' + row.flatdescription + '">' + row.flatdescription + '...' + row.flatname + '</a></li>');
                    }
                    list.html(items.join('\n'));
                    list.listview('refresh');
                    $('a', list).live('click', function(e) {
                        getItem1($(this).attr('data-flat'), $(this).attr('data-description'));
                    });
                    $('#entriesflat').show();
                } else {
                    $('#entriesflat').hide();
                }
            })
        });
    });
}

обе функции создают динамическиlistviews.

функция getTitles отображает здания компании, тогда как getItem отображает квартиры выбранного здания.

я включаю оповещение (строительный код);чтобы выяснить проблему, но я не могу понять, что не так.

В первый раз все в порядке.Когда я возвращаюсь к getTitles и перехожу к getItem, предупреждение отображается дважды ... когда я возвращаюсь назад и пересылаю отображение предупреждения 3 раза и, таким образом, включаюсь 4 раза ... 5 раз ...

и всекод с этой точки повторяется как предупреждение ...

что не так

спасибо за ваше время

Ответы [ 3 ]

1 голос
/ 11 февраля 2012

Ваш вызов live назначает новый обработчик событий при каждом вызове вашей функции.Удалите ваш старый обработчик, прежде чем присоединять новый: 

$('a', list).die('click');
$('a', list).live('click', …);

В качестве альтернативы вы можете использовать click вместо live.

1 голос
/ 11 февраля 2012

Я думаю, что это обработчик click, использующий live.live присоединяет обработчик событий к document или body и слушает селектор, который мы передаем.Каждый раз, когда вы вызываете getTitles, он присоединяет новый обработчик.

Глядя на ваш код, нет необходимости использовать live, просто используйте обработчик click, он будет работать нормально.

Измените это внутри getTitles

    $('a', list).click(function(e) {
        getItem($(this).attr('data-trnote'));
    });

То же внутри getItem метод 

    $('a', list).click(function(e) {
         getItem1($(this).attr('data-flat'), $(this).attr('data-description'));
    });
0 голосов
/ 11 февраля 2012

Полагаю, вы размещаете свои теги внутри div [data-role = "page"], верно?Поскольку jQM загружает все в этом элементе через AJAX, ваш JS будет перезапускаться всякий раз, когда страница загружается.

Даже использование live не поможет, если вы присоединяете несколько живых событий, решение состоит в том, чтобы правильноиспользуйте событие jQM pageinit для запуска вашего кода только один раз.Инкапсулировать обработчики событий сложно, я предлагаю использовать обработчик событий on .

В любом случае вы не можете просто перейти на jQuery mobile, не понимая, как работает jQM, вы используете документ.готов и используя глобальные селекторы, которые, как вы можете себе представить, взорвутся, когда у вас будет загружено несколько страниц в одном DOM.посмотрите на подобный вопрос здесь для более подробного обзора: https://stackoverflow.com/a/9085014/737023

...