在jquery popup div关闭后,超链接无法正常工作

时间:2014-01-17 08:24:25

标签: javascript php jquery jquery-mobile

我有一个简单的页面,我在这个popup widget链接中应用Popup小部件。我正在使用 jquery 1.10.2 这是我的index.html:

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>popup demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/git/jquery.mobile-git.min.css">
  <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="//code.jquery.com/mobile/git/jquery.mobile-git.min.js"></script>
</head>
<script type="text/javascript">
    function closeDiv()
    {
        console.log("fine");
        $('#popupLogin').popup( "close" );
    }
</script>
<body>

<div data-role="page" id="page1">
  <div data-role="header">
    <h1>jQuery Mobile Example</h1>
  </div>
  <div role="main" class="ui-content" id="ui-content">
    <a href="#popupLogin" data-rel="popup">Open Popup</a>

    <div data-role="popup" id="popupLogin" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">
        <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <iframe src="../login.php" width="497" height="298" seamless></iframe>

    </div>
  </div>

  <div>
    <a href="../back.php" > click me1</a><br>
    <a href="../back.php" > click me2</a>
  </div>
</div>

</body>
</html>

这是我在iframe src中使用的login.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login</title>
</head>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/db.js"></script>
<body>
    <form name="loginForm" id="loginForm" >
        <P><span class="title">Email Id</span> <input name="emailId" id="emailId" type="text" /></P>
        <P><span class="title">Password</span> <input name="password" id="password" type="password" /></P>
        <P><input name="login" id="login" type="button" value="Login" /></P>
         <P><span class="title" id="error"></span></P>
    </form>

</body>
</html>

我得到的问题是,我发送一个ajax post请求来验证用户的登录并在用户的验证结果成功后关闭popupLogin div:这是我的javascript代码:

function testLogin( eid, pwd )
    {
        atkn = getAuth(eid, pwd);
        $.post(urls.auth, {authorize: atkn}, function(result){
            if( result == LOGIN_SUCCESS )
            {
                window.parent.authResult = true;
                window.parent.closeDiv();
            }
            else
            {
                $("#error").html(result);
            }
        });
    }

一切正常,但当div关闭时,超链接点击me1 点击me2 根本不起作用。

我搜索过很多但无法找到解决此问题的方法。 请帮助或任何可以帮助我的链接。

我也尝试过以下@Omar说:

<div data-role="page" id="page1">
   <div data-role="popup" id="popupLogin" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">

        <iframe src="../login.php" width="497" height="298" seamless></iframe>

    </div>
    <div role="main" class="ui-content" id="ui-content">
     <a href="#popupLogin" data-rel="popup">Open Popup</a>
  </div>
  <a href="javascript(0)" onclick="window.open('../top_deals.php')"> click me1</a><br>
    <a href="../top_deals.php" > click me2</a>
</div>

0 个答案:

没有答案