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(); 
     });