jQuery мобильный диалог не работает

Question

Это меня озадачило все утро.

У меня есть диалог на моей мобильной странице JQuery. Все работает нормально, но только ПОСЛЕ I F5 на странице.

теперь у меня есть следующая страница

<div data-role="page" id="pictures"> 

     <div data-role="header"> 
      <a href="#" id="logoutbutton" data-role="button" data-icon="home">Log Uit</a> 
      <h1>Foto's</h1> 
     </div><!-- /header --> 

     <div data-role="content"> 
      <div class="grid_outer" id="grid_outer_pictures" style="width: 275px;margin-left: auto; margin-right: auto;"> 
       <div class="grid_inner" id="grid_inner_pictures"> 
        <h2 class="h2_header">Mijn Foto's</h2> 

        <?php 

        if ($nrofuserpictures < 3) { 
         echo " 
        <input value='Voeg Toe' data-icon='add' data-theme='b' type='button' id='addpicturebutton'> 
        "; 
        } 
        ?> 

        <?php 
        include 'php/show_m_userpictures.php'; 
        ?> 
       </div> 
      </div> 
     </div><!-- /content --> 

     <?php 
     include 'homefooter.php'; 
     ?> 

     <!-- /footer --> 
    </div><!-- /page --> 

    <div data-role="dialog" id="confirmbox"> 
     <div data-role="header" data-icon="false"> 
      <h1>Bevestig</h1> 
     </div><!-- /header --> 

     <div data-role="content"> 
      <h3 id="confirmMsg">Confirmation Message</h3> 

      <br> 

      <center> 
       <a href="#" class="btnConfirmYes" data-role="button" data-icon="check" data-mini="true" data-inline="true">&nbsp;&nbsp;&nbsp;Ja&nbsp;&nbsp;&nbsp; </a> 
       &nbsp;&nbsp;&nbsp; 
       <a href="#" class="btnConfirmNo" data-role="button" data-rel="back" data-icon="delete" data-mini="true" data-inline="true">Nee</a> 
      </center> 
     </div> 
    </div> 

Сценарий show_m_userpictures.php генерирует DIV с изображением и удаления кнопки, как так:

<div class='picture'><img id='userpicture' width='170' height='139.4' src='../users/annet/pictures/example.png' pictureid='30' class='unapproved' /></div><div style='min-width: 150px; max-width: 150px;'><input value='Verwijder' data-icon='delete' data-theme='b' type='button' id='deletepicturebutton' pictureid='30'></div> 

У меня есть следующий код яваскрипта в отдельный файл js.

$(document).on('pageshow', '#pictures', function() { 
alert('pageshow pictures '); 

$("[id=deletepicturebutton]").on('click', function(e) { 

    e.preventDefault(); 
    var pictureid = $(this).attr('pictureid'); 

    alert('deletepicturebutton clicked pictureid ' + pictureid); 

    showConfirm("Weet je zeker dat je deze foto wilt verwijderen ?", function() { 

     $.ajax({ 
      async : false, 
      url : "../php/process_delete_picture.php?pictureid=" + pictureid, 
      success : function(data) { 
       if (data != "") { 
        // in case of error 
        alert(data); 
       } else { 
        alert("Foto verwijderd !"); 
        window.location.href = "pictures.php"; 

       } 
      } 
     }); 
    }); 

}); 

});

И функция showConfirm.

// confirm dialog 
function showConfirm(msg, callback) { 
$("#confirmMsg").text(msg); 
$("#confirmbox .btnConfirmYes").on("click.confirmbox", function() { 
    $("#confirmbox").dialog("close"); 
    callback(); 
}); 

$("#confirmbox .btnConfirmNo").off("click.confirmbox", function(r) { 
}); 

//$.mobile.changePage("#confirmbox"); 
$.mobile.changePage('#confirmbox', 'pop', false, true); 

}

Я не понимаю, почему диалог не отображается в первый раз, когда я войти на страницу и нажать на одну из кнопок ?? на удаление Я делаю событие в виде страницы, пробовал его с помощью pagebeforeshow, и я даже добавил javascript к нижней части страницы.

Благодарим за помощь!

UPDATE

Я пытался перейти на внешнюю страницу, как этот

$.mobile.changePage('confirmbox.php', 'pop', false, true); 

И это работает! но это не то, что я хочу, потому что тогда я не могу правильно использовать обратный вызов. Так почему-то страница с первой загрузкой не знает о диалоговом окне (???).

Answer 1

Трудно узнать, что именно происходит в этом случае. Если бы вы могли опубликовать рабочий пример, который воспроизводит случай, это очень помогло бы.

Я изменил некоторые части вашего кода. Обратите внимание, что в вашей реализации несколько вызовов метода showConfirm, похоже, присоединяют событие click к кнопке диалога более одного раза. В результате обратный вызов вызывается несколько раз.

<!doctype html> 
<html lang="en"> 

    <head> 
     <title>StackOveflow Case</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> 
     <script> 
      $(document).on('click', '#pictures #deletepicturebutton', function (e) { 
       e.preventDefault(); 
       var pictureid = $(this).attr('pictureid'); 
       alert('deletepicturebutton clicked pictureid ' + pictureid); 
       showConfirm("Weet je zeker dat je deze foto wilt verwijderen ?", function() { 
        /* 
        $.ajax({ 
         async: false, 
         url: "../php/process_delete_picture.php?pictureid=" + pictureid, 
         success: function (data) { 
          if (data != "") { 
           // in case of error 
           alert(data); 
          } else { 
           alert("Foto verwijderd !"); 
           window.location.href = "pictures.php"; 

          } 
         } 
        }); 
        */ 
        alert('in callback'); 
       }); 
      }); 

      function showConfirm(msg, callback) { 
       $("#confirmMsg").text(msg); 

       $("#confirmbox .btnConfirmYes").unbind("click").click(function (e) { 
        e.preventDefault(); 
        $("#confirmbox").dialog("close"); 
        callback(); 
       }); 

       $.mobile.changePage('#confirmbox', { 
        transition: "pop", 
        reverse: false, 
        changeHash: true 
       }); 
      } 
     </script> 
    </head> 

    <body> 
     <div data-role="page" id="pictures"> 
      <div data-role="header"> 
       <a href="#" id="logoutbutton" data-role="button" data-icon="home">Log Uit</a> 
       <h1>Foto's</h1> 

      </div> 
      <!-- /header --> 
      <div data-role="content"> 
       <div class="grid_outer" id="grid_outer_pictures" style="width: 275px;margin-left: auto; margin-right: auto;"> 
        <div class="grid_inner" id="grid_inner_pictures"> 
         <h2 class="h2_header">Mijn Foto's</h2> 

         <div class='picture'> 
          <img id='userpicture' width='170' height='139.4' src='../users/annet/pictures/example.png' pictureid='30' class='unapproved' /> 
         </div> 
         <div style='min-width: 150px; max-width: 150px;'> 
          <input value='Verwijder' data-icon='delete' data-theme='b' type='button' id='deletepicturebutton' pictureid='30'> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- /page --> 
     <div data-role="dialog" id="confirmbox"> 
      <div data-role="header" data-icon="false"> 
       <h1>Bevestig</h1> 

      </div> 
      <!-- /header --> 
      <div data-role="content"> 
       <h3 id="confirmMsg">Confirmation Message</h3> 

       <br> 
       <center> 
        <a href="#" class="btnConfirmYes" data-role="button" data-icon="check" data-mini="true" data-inline="true">&nbsp;&nbsp;&nbsp;Ja&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp; 
        <a href="#" class="btnConfirmNo" data-role="button" data-rel="back" data-icon="delete" data-mini="true" data-inline="true">Nee</a> 
       </center> 
      </div> 
     </div> 
    </body> 

</html> 

Надеюсь, это поможет.