如何防止超鏈接刷新頁面？

Question

大家，我正在使用JavaScript在頁面上執行表單彈出式窗口。 包含表單而不是直接將其作為頁面的一部分。

當我單擊超鏈接時，表單僅顯示一秒鍾，然后消失。 如果我從字面上在同一頁面中創建表單，而不是將其作為php文件包含在內，則它可以工作。

我相信是刷新頁面的超鏈接。 如何防止超鏈接刷新頁面？

<?php < scripttype = "text/javascript" >
function deselect(e)
    {
    $('.popUp') . slideFadeToggle(
   function ()
    {
    e . removeClass('selected');
    });
}

$(
function ()
{
$('#edit') . on('click',
function ()
    {
    if ($(this) . hasClass('selected'))
        {
        deselect($(this));
        }
      else
        {
        $(this) . addClass('selected');
        $('.pop') . slideFadeToggle();
        }

    return false;
    });
$('.close') . on('click',
function ()
    {
    deselect($('#edit'));
    return false;
    });
});
$ . fn . slideFadeToggle =
function (easing, callback)
{
return this . animate(
    {
    opacity:
        'toggle', height:
            'toggle'
            }

        , 'fast', easing, callback);
        };
</script>

這是單獨文件中的表格...

<div id="contactInfoDiv" class="fluid popUp">
<form id="updateForm" method="post" action="editContact.php">
<pre>
First Name:   <input type="text" name="firstName" value="<?php echo    $firstname;?>"><br>
    Last Name:    <input type="text" name="lastName" value="<?php echo  $lastname;?>"><br>
    Address:      <input type="text" name="address" value="<?php echo $address;?>"><br>
    Phone:        <input type="text" name="phone" value="<?php echo $phone;?>"><br>
    Email:        <input type="email" name="email" value="<?php echo $email;?>"><br>
<input type="submit" name="update" value="Update"><br>
</pre>
</form>
    </div>

編輯

我正在嘗試做的只是包括上面這樣的表格：

<?php include("editContact.php");

<a href="userProfile.php" id="edit">Edit</a>

更新：

我添加了e.preventDefault（），如下所示：

 <script type="text/javascript">
 function deselect(e) {

  $('.pop').slideFadeToggle(function() {
 e.removeClass('selected');

    });
   e.preventDefault();
 }

   $(function() {
   $('#edit').on('click', function() {
 if($(this).hasClass('selected')) {
  deselect($(this));               
} else {
  $(this).addClass('selected');
  $('.pop').slideFadeToggle();
}
 return false;
 });

  $('.close').on('click', function() {
  deselect($('#edit'));
   return false;
   });
});

 $.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing,      callback);
 };

Answer 1

為了防止jQuery鏈接的默認行為，您可以使用以下命令啟動函數：

$("#edit").on("click", function(e){
    e.preventDefault();
}

Answer 2

嘗試更改HTML鏈接的結構。

<?php include("editContact.php");

<a href="#edit" id="edit">Test</a>

href ='＃edit'使鏈接嘗試使您的瀏覽器將id ='edit'的元素作為焦點，而不是嘗試為您加載遠程頁面。 現在，用戶將不會離開您的頁面（沒有http請求，沒有刷新），並且仍然觸發了jquery事件。

有關更多信息，請參見此問題 。

（感謝DarkBee的評論）。