jQuery 链接和丑陋的格式

发布于 2024-08-21 22:58:57 字数 876 浏览 3 评论 0原文

我有一个表格，每行有两个单元格。第一个包含数据，第二个包含输入按钮“编辑”和“删除”。为了使这个不显眼的 ajax，我使用下面的代码：

<tr>
    <td>I have some data for you</td>
    <td>
       <a href="edit" class="edit"><input type="button" value="Edit" /></a>
       <a href="delete" class="delete"><input type="button" value="Delete" /></a>
    </td>
</tr>

$("a.edit").live("click",function(){ 
    $tr = $(this).parent().parent();
    $tr.children().fadeOut(400,function(){
        $tr.loadingGif(function(){
            $tr.ajaxGetEditForm();
            });
        });
    return false;      
});

.loadingGif() 只是一个将背景变成黄色并提供“加载”gif 的函数。 ajaxGetEditForm() 是一个进行 Ajax 调用并用编辑输入表单替换旧数据的函数。

它按预期工作，但它们是链接这些事件的更干净的方式吗？当我有 $tr.children().fadeOut().parent().isLoading()... javascript 只是通过函数进行拍摄。 IE 我希望它等待淡出动画完成后再开始下一个。

原文

I have a table with two cells to each row. The first contains the data and the second contains the input buttons "Edit" and "Delete". To make this unobtrusive ajax I'm using the code below:

<tr>
    <td>I have some data for you</td>
    <td>
       <a href="edit" class="edit"><input type="button" value="Edit" /></a>
       <a href="delete" class="delete"><input type="button" value="Delete" /></a>
    </td>
</tr>

$("a.edit").live("click",function(){ 
    $tr = $(this).parent().parent();
    $tr.children().fadeOut(400,function(){
        $tr.loadingGif(function(){
            $tr.ajaxGetEditForm();
            });
        });
    return false;      
});

.loadingGif() is just a function that turns the background yellow and provides a 'loading' gif. ajaxGetEditForm() is a function that makes the Ajax call and replaces the old data with the Edit input form.

It works as expected but is their a cleaner way to chain these events? when I have $tr.children().fadeOut().parent().isLoading()... javascript just shoots through the functions. I.E. I want it to wait for the fadeOut animation to finish before it starts the next.

分享到QQ

分享到微博