Fancybox jQuery ajax成功綁定表單提交

Question

有沒有辦法在成功後將「submit」綁定到fancybox？

這是我有：

<div class="ta_l" id="tell_friend"> 
    <form id="form_tell_friend" method="post" action="">    
     <table cellspacing="0" cellpadding="0" border="0" class="tbl_insert mr_b0"> 
      <tbody> 
       <tr class="tell_friend_email dn"> 
        <th>&nbsp;</th> 
        <td><span class="red">Please provide a valid email address</span></td> 
       </tr> 
       <tr> 
        <th><label for="tell_friend_email">Email: *</label></th> 
        <td><input type="text" class="fld" value="" id="tell_friend_email" name="tell_friend_email" /></td> 
       </tr> 
       <tr class="tell_friend_content dn"> 
        <th>&nbsp;</th> 
        <td><span class="red">Please provide a message</span></td> 
       </tr> 
       <tr> 
        <th><label for="tell_friend_content">Message: *</label></th> 
        <td><textarea class="tartiny" rows="" cols="" id="tell_friend_content" name="tell_friend_content"></textarea></td> 
       </tr> 
       <tr> 
        <th>&nbsp;</th> 
        <td> 
         <label class="sbm sbm_blue small" for="tell_friend_btn"> 
          <input type="submit" value="Send" class="btn" id="tell_friend_btn" /> 
         </label> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </form> 
</div> 

然後我打電話的fancybox，並做一些驗證使用Ajax和PHP：

// tell a friend form 
if($('.tell-friend').length > 0) { 

    $('.tell-friend').fancybox({ 
     'speedIn'  : 600, 
     'speedOut'  : 200, 
     'overlayShow' : true, 
     'scrolling'  : 'no', 
     'titleShow'  : false  
    }); 

    function tellAFriend() { 

     $.ajax({ 
      type : "POST", 
      cache : false, 
      url  : "/message/run/tellafriend", 
      data : $(this).serializeArray(), 
      dataType: "json", 
      success: function(data) { 
       $("#form_tell_friend").bind("submit", tellAFriend);     
       if(data != 1) { 
        $.each(data, function(key, value) { 
         $('.' + value).fadeIn(500); 
        }); 
        $.fancybox.resize(); 
        $("#form_tell_friend").bind("submit", tellAFriend);      
       } else { 
        $.fancybox({ 
         'scrolling'  : 'no', 
         'content'  : 'Your message has been sent successfully' 
        }); 
       }         
      }, 
      error: function(data) { 
       alert('Error occured'); 
      } 
     }); 

     return false; 
    } 

    $("#form_tell_friend").bind("submit", tellAFriend);  
} 

，最後我的PHP：

public function tellafriendAction() { 
$empty = array(); 

if(!empty($_POST)) { 
    foreach($_POST as $key => $value) { 
     if (empty($value)) { 
      $empty[] = $key; 
     } 
    } 
} 

if(!empty($empty)) { 
    echo json_encode($empty); 
} else { 
    echo 1; 
}  

}

現在 - 驗證第一次正常，但我無法重新提交表單 - 如果我將某些值添加到字段中，但在單擊提交按鈕後仍會顯示警告 - 就好像它不能識別提交事件一樣。

我說：

$("#form_tell_friend").bind("submit", tellAFriend); 

在阿賈克斯的成功 - 但我不認爲它的工作 - 任何想法？

Answer 1

好的 - 如果有人想知道 - 我已經解決了這個問題。

它沒有真正的綁定 - 這是錯誤信息 - 重新加載後他們沒有隱藏。

下面是我如何解決這個問題了（也許不是最好的解決辦法 - 但它的工作原理）：

if($('.tell-friend').length > 0) { 

    $('.tell-friend').fancybox({ 
     'speedIn'  : 600, 
     'speedOut'  : 200, 
     'overlayShow' : true, 
     'scrolling'  : 'no', 
     'titleShow'  : false  
    }); 

    function tellAFriend() { 
     var rows = $('tr.dn'); 
     $.each(rows, function() { 
      $(this).hide(); 
     }); 
     $.ajax({ 
      type : "POST", 
      cache : false, 
      url  : "/message/run/tellafriend", 
      data : $(this).serializeArray(), 
      dataType: "json", 
      success: function(data) {         
       if(data != 1) { 
        $.each(data, function(key, value) { 
         $('.' + value).fadeIn(500); 
        }); 
        $.fancybox.resize(); 
       } else { 
        $.fancybox({ 
         'scrolling'  : 'no', 
         'content'  : 'Your message has been sent successfully' 
        }); 
       }         
      }, 
      error: function(data) { 
       alert('Error occured'); 
      } 
     }); 

     return false; 
    } 

    $("#form_tell_friend").bind("submit", tellAFriend);  
} 

基本上 - 在我經歷的所有循環的tellAFriend（）函數的開頭表格行（tr）的元素與類「dn」並使用hide（）隱藏它 - 那麼如果仍有任何缺失值 - 它們將再次顯示：

var rows = $('tr.dn'); 
     $.each(rows, function() { 
      $(this).hide(); 
     });