Question

我正在使用bootstrap，并在我的表单上有内联按钮。第一次单击将启用文本字段编辑。第二次单击将通过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

目前输入字段按照我的意愿切换。如何仅在第二次单击按钮时调用成功功能？

Answer 1

像这样？，我正在检查你要添加到按钮的课程：

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

检查this fiddle

第二次单击时运行一个功能

1 个答案: