2

我正在使用引导程序并在我的表单上有内联按钮。第一次单击将使文本字段能够编辑。第二次单击将通过 ajax 保存更改。

html

<fieldset class="form-horizontal input-append">                
    <legend>Evelyn Jones <span class=" badge badge-important">Account Locked</span></legend>                    
    <div class="alert alert-success" style="display: block;">Success Confirmation.</div>
    <div class="control-group">
        <label class="control-label" for="inputEmail">Email Address</label>
        <div class="controls">
            <input name="ctl00$ctl00$PortalContent$PortalContent$txtEmailAddress" type="text" value="test" id="txtEmailAddress" class="aspNetDisabled span3" disabled="disabled">
            <a id="lnkEditEmailAddress" class="btn" data-attr="edit"><i class="icon-ok icon-edit"></i></a>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="txtUserName">Username</label>
        <div class="controls">
            <input name="ctl00$ctl00$PortalContent$PortalContent$txtUserName" type="text" value="test" id="txtUserName" disabled="disabled" class="aspNetDisabled span3">
            <a id="lnkEditUsername" class="btn" data-attr="edit" href="javascript:__doPostBack('ctl00$ctl00$PortalContent$PortalContent$lnkEditUsername','')"><i class="icon-edit"></i></a>
            <a id="lnkEmailUsername" class="btn" data-attr="email" href="javascript:__doPostBack('ctl00$ctl00$PortalContent$PortalContent$lnkEmailUsername','')"><i class="icon-envelope"></i></a>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputEmail"></label>
         <div class="controls">
                <div class="btn-group">
                    <button class="btn">Unlock Account</button>
                    <button class="btn">Reset Password</button>
                </div>
            </div>
        </div>
     </div>
</fieldset>

jQuery

$('.alert').hide();

$('.controls a[data-attr="edit"]').click(function (e) {
    e.preventDefault();        $(this).toggleClass("btn-primary");
    $(this).find('i').toggleClass("icon-white").toggleClass("icon-edit").addClass('icon-ok');
    $(this).siblings('input[type=text]').attr('disabled', function(idx, oldAttr) {
        return !oldAttr;
    });
});

function success() {
    $('.alert').fadeIn();
}

这是一个jsfiddle

目前，输入字段可以根据需要切换。如何仅在第二次单击按钮时调用成功函数？

4

1 回答 1

2

像这样？，我正在检查您要添加到按钮的类：

if($(this).hasClass("btn-primary")) {
    success();
} else {
    hideSuccess();
}

检查这个小提琴

于 2013-07-11T20:39:04.483 回答