Taphold не работает с динамически созданным списком в phonegap Android

У меня есть список, который обрабатывает данные из локальной базы данных. И я хочу добавить событие Taphold в элементы списка, поэтому я использую пример Taphold с этого сайта http://www.raymondcamden.com/index.cfm/2012/5/23/Context-Menu-Example-with-jQuery-Mobile, но когда запустите этот код на эмуляторе, он работает нормально, но когда я попытался внедрить его в код, который я использую, он не работает должным образом, он выдает предупреждение, которое находится в событии Taphold, но не создает диалоговое окно примера здесь код, который я использую :

function createlist(){
alert("I am in create list");
db.transaction(function(tx){
tx.executeSql(select_nameUserDetails,[],function(tx,results){
    $('#name').empty();
    alert("from list "+results.rows.length);
    if(results.rows.length>0)
        {
            for(var i=0;i<results.rows.length;i++)
                {
                alert(i);
                $('#name').append('<li><p class="namelist" id="s'+i+'" onclick="selectname('+results.rows.item(i).id+')">'+results.rows.item(i).frist_name+'</p></li');
                 temp_id=results.rows.item(i).id;
                dataobj[temp_id]=results.rows.item(i).frist_name;
                alert(dataobj[temp_id]);
                }


        else{
        alert("No data present");
        }   
    });
$(document).on("taphold",".namelist",function(event){
    alert("I am in taphold event");
    event.stopPropagation();
    $(this).simpledialog2({
     mode:"blank",
     headerText:"Image Options",
     showModal:false,
     forceInput:true,
     headerClose:true,
     blankContent:"<ul data-role='listview'><li><a href=''>Edit</a></li><li><a href=''>Delete</a></li></ul>"
     });
});
});
}

вот файлы js и css при использовании:

<link rel="stylesheet" href="contactcss/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="css/jquery.mobile.simpledialog.min.css">
<script src="js/jquery.js"></script><script src="js/index.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/jquery.mobile.simpledialog2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.7.0.js"></script>

вот html-код:

<div data-role="Content" >
<div data-role="listview" id="field">
    <ul class="Name" id="name" data-role="listview" data-inset="true" data-theme="b">

    </ul>
</div>

logcat Ошибка, которую я получаю:

07-13 17:29:33.145: D/CordovaLog(2696): TypeError: Result of expression 'o[0]' [undefined] is not an object.
07-13 17:29:33.145: E/Web Console(2696): TypeError: Result of expression 'o[0]' [undefined] is not an object. at file:///android_asset/www/js/jquery.mobile-1.3.1.min.js:4

заранее спасибо


person Neerav Shah    schedule 12.07.2013    source источник


Ответы (1)


При работе с динамически создаваемым содержимым и jQuery Mobile необходимо использовать делегированную привязку событий.

Вместо этого:

$(".namelist").on("taphold",function(event){

привязать так:

$(document).on("taphold",".namelist",function(event){

Этому решению все равно, существует ли .namelist или нет. Событие касания будет привязано к объекту документа и будет распространяться на .namelist только тогда, когда оно станет активным в DOM.

person Gajotres    schedule 12.07.2013
comment
Я пробовал это, но все та же проблема, он показывает только окно предупреждения, и после нажатия на него не отображается диалоговое окно. - person Neerav Shah; 12.07.2013
comment
Можете ли вы отправить мне свой проект, и я посмотрю на него? - person Gajotres; 12.07.2013
comment
извините, я не могу отправить вам код, который он повторяет, или политику компании, но можете ли вы привести мне пример, в котором список создается динамически, и когда пользователь долго нажимает / удерживает элемент списка, я создам всплывающее меню, чтобы выбрать это было бы очень полезно. - person Neerav Shah; 12.07.2013