jQuery表单提交/效果改进？

Question

我正在制作一个使用jQuery ajax.form插件提交的下滑登录表单.效果有效,提交有效.但是当你把它们放在一起时它们就不起作用......

这是针对表达式引擎的,因此{if}标签只是EE条件.一旦用户登录就看到内容发生了变化 - 我只需要重新加载以便内容发生变化 - 我认为做一堆.html()会更容易重写...一旦表单是提交后,正确的内容会重新加载并且可以点击,但"#panel"不会重新制作动画.

<div id="client-login">
<div class="wrap">
<p  class="work-message">We're doing some work under the hood!  If things get/are funky, please excuse us!</p>
    {if logged_out}
    <div id="client" class="login">Client Login</div>
    {/if}
    {if logged_in}
    <div id="client" class="login">Hey, {username}!</div>
    {/if}
</div>
</div>
<div id="panel">
    <div id="panel-content" class="wrap">
    {if logged_out}
    {exp:member:login_form id="login-form"}
    <ul>
    <li>
    <label><span>Username</span></label>
    <input type="text" name="username" value="" maxlength="32" class="input" size="25" />
    </li>
    <li>
    <label><span>Password</span></label>
    <input type="password" name="password" value="" maxlength="32" class="input" size="25" />
    </li>
    <li class="login-forgot">
    <a href="{path='member/forgot_password'}">Forgot your password?</a>
    </li>
    {if auto_login}
    <li class="checkbox">
    <input class='checkbox' type='checkbox' name='auto_login' value='1' /> Auto-login on future visits
    </li>
    {/if}
    </ul>
    <p>
    <input type="submit" id="panelsubmit" name="submit" value="Submit" />
    </p>
    {/exp:member:login_form}
    {/if}
    <div id="messages">
    <p></p>
    </div>
{if logged_in}
    <div id="logout">
        <h2>What do ya wanna' do?!</h2>
        <form id="login-form" >

          <input type="hidden" name="ACT" value="10" />

          <input type="submit" value="Log Out" />

        </form> 
    </div>
{/if}

$(document).ready(function()
{
$('.login').toggle(
function()
{
  $('#panel').stop().animate({
  height: "150", 
  padding:"20px 0",
  backgroundColor:'rgba(0,0,0,0.8)',
 }, 500);
 $('#client-login').stop().animate({
  backgroundColor:'rgba(0,0,0,0.8)',
 }, 500);
},
function()
{
  $('#panel').stop().animate({
    backgroundColor:'rgba(0,0,0,0.2)',
  height: "0", 
  padding:"0px 0",
  }, 500);     
 $('#client-login').stop().animate({
  backgroundColor:'rgba(0,0,0,0.2)',
 }, 500);

});

    $('#login-form').ajaxForm({  
        // success identifies the function to invoke when the server response 
        // has been received; here we apply a fade-in effect to the new content 
        success: function() { 
            $("#client").remove().fadeOut("fast");
            $("#client-login").load("/ #client-login").fadeIn("fast");
            $("#panel-content").remove().fadeOut("fast");
            $("#panel").load("/ #panel-content").fadeIn("fast");

        } 
    }); 
});

功能基本上是存在的,但是表单需要像以前一样提交后才能工作!此外,.remove的动画不起作用.我是JavaScript的新手,我不知道如何改进它.

Answer 1

由于您是通过AJAX加载内容,因此重新加载之前存在的动画和功能将不再起作用,因为效果仅绑定到原始元素.要解决此问题,您需要将加载的内容重新绑定到动画等.

有几种方法可以做到这一点.首先,您可以将动画功能重新应用于加载的内容.例如,一旦加载了内容,就调用一个将动画重新绑定到新元素的函数.

其次,更容易,您可以使用jQuery live()函数.在我看来,这是更好的方法.live()函数绑定所有当前和未来元素,而不是仅绑定当前元素.因此,在创建动画时,请在live()函数中创建它.以下是http://docs.jquery.com/Events/live中的一个用法示例:

$("p").live("click", function(){
  $(this).after("<p>Another paragraph!</p>");
});