jQuery Mobile的：注入的內容出現後立即消失

我使用jQuery Mobile的它包含下面的代碼登錄頁面：jQuery Mobile的：注入的內容出現後立即消失

<div id="loginPage" data-role="page" data-theme="a"> 

    <div data-role="content"> 

     <div id="alerts"></div> 

     <form id="login-form"> 

     <input type="text" id="username" name="username" value="" placeholder="username or email" /> 
     <input type="password" id="password" name="password" value="" placeholder="password" /> 

     <button id="login-button" onClick="userLogin()">Login</button> 

     </form> 

    </div><!-- /content --> 

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

這裏是我的javascript的一部分，當用戶點擊「登錄時調用'按鈕。如果其中一個字段留空，我會看到注入#alerts div的以下文本，但在幾分之一秒之內，內容又消失了。

if (username.length == 0 || password.length == 0) { 
    //alert('Please enter your username or email and your password'); 
    $('#alerts').html('Please enter your username or email and your password.').trigger('create'); 
}

我也嘗試過這種使用.append()代替.html()。兩者都有同樣的結果。我已經評論了我的測試alert()，其中一個字段留空時有效。

我能做些什麼，以確保內容保留在網頁上，一旦它被注入？

感謝您的任何幫助或洞察力，你可以提供！ -mark

每Jasper的要求，這裏是所有的「登錄」按鈕被點擊時執行的javascript：

function userLogin() { 
    var username = $("#username").val(); 
    var password = $("#password").val(); 

    if (username.length == 0 || password.length == 0) { 
    $('#alerts').append('Please enter your username or email and your password.').trigger('create'); 
    } 

    else { 
    $.post("services/user-status.php", { type: 'login', username: username, password: password }, 
     function(data) { 
     var response = data.item; 
     console.log(response); 
     if (response.loggedIn == false) { 
      $('#alerts').html('The username/email and password you used did not work. Please try again.').trigger('create'); 
     } 
     else { 
      localStorage.userID = response.userID; 
      localStorage.username = response.username; 
      localStorage.userStatus = 'loggedIn'; 
      $.mobile.changePage('profile.html'); 
     } 
     },'json'); 
    } 
}

來源

2012-03-12 Mark Rummel

您可以發佈所有運行當您單擊'Login'按鈕的代碼？另外，什麼'.trigger（'創建'）'（你想要初始化什麼部件）？這是一個JSFiddle，它顯示你發佈的代碼的作用：http://jsfiddle.net/BkMEB/1/。 – Jasper 2012-03-12 18:40:17

@Jasper添加所有的代碼上面 – 2012-03-12 18:46:56

@Jasper我刪除'.trigger（「創造」）'，因爲它是一個沒有任何部件只是一個'div'，但它仍然出現，然後消失我。 – 2012-03-12 18:51:06

看起來你需要停止從點火的click事件的傳播爲您的按鈕。您可以通過在click事件處理程序返回false做到這一點： -

<button id="login-button" onClick="return userLogin()">Login</button>

JS -

HTML

function userLogin() { 
    ... 
    return false; 
}

這裏是一個演示：http://jsfiddle.net/BkMEB/3/

而且，由於你正在使用jQuery，你可以像這樣綁定到<button>元素：

$('#login-button').bind('click', userLogin);

這與將onClick="return userLogin()"作爲按鈕的屬性相同，但允許您刪除內聯JS。

這裏是一個演示：http://jsfiddle.net/BkMEB/4/

來源

2012-03-12 19:13:03 Jasper

這對我有用！我使用了你的第二個建議：'$（'＃login-button'）。bind（'click'，userLogin）;'並且添加'return false'到我的函數中。非常感謝您的幫助！ – 2012-03-12 19:28:39

jQuery Mobile的：注入的內容出現後立即消失

回答

相關問題