Question

我希望设置此项，以便在单击某个文本主体时弹出一个文本输入字段，用户可以在该字段中输入数据，然后单击“保存”或“取消”按钮并将其分别发送到数据库或重置值。然而，尽管使用了'return false'，我似乎无法防止此代码重复激活。

我已经使用了die（），但是我也希望能够在用户保存或取消之后重新实现原始点击事件，并且无法想出使其工作的方法。在此先感谢您的帮助。

$('td[name]').live("click", function() {
    nameof = $(this).attr("name");
    idof = $(this).attr("id");
    valueof = $(this).html();

    $(this).html('<input type="text" name="' + nameof + '" value="' + valueof + '"><input type="hidden" name="id" value="' + idof + '"><span id="save">save</span> &nbsp <span id="cancel">cancel</span>');

    return false;   
});

更新

这是我最终提出的（包括所有编辑就地代码）：

$('td[name="grouping"] span, td[name="title"] span').live('click', function() {         
    nameof = $(this).parent().attr("name");
    idof = $(this).parent().attr("id");
    valueof = $(this).html();

    if($("table td>span").children('input').length > 0) {} 
    else {
        if($(this).children().length > 0) {} 
        else {
            $(this).html('<input type="text" name="' + nameof + '" value="' + valueof + '"><input type="hidden" name="id" value="' + idof + '"><input type="hidden" name="originalinput" value="' + valueof + '"><span class="save">save</span> &nbsp; <span class="cancel">cancel</span>');
        }
    }

});

$('.cancel').live('click', function() {         
    $(this).parent().html($(this).siblings('input[name="originalinput"]').attr("value"));
});

$('.save').live('click', function() {

    savevalue = $(this).siblings('input[type="text"]').attr("value");
    saveid = $(this).siblings('input[name="id"]').attr("value");
    savecolumn = $(this).siblings('input[type="text"]').attr("name");

    $.ajax({
       type: "POST",
       url: "../php/adminajax.php",
       data: 'id=' + saveid + '&' + savecolumn + '=' + savevalue
    });

    $(this).parent().html(savevalue);
});

$('#saving').ajaxStart( function() {
    $(this).fadeIn(100);
});

$('#saving').ajaxStop( function() {
    $(this).fadeOut(2000);
});

我确信它比我下载的任何内容都要麻烦，但至少我现在知道AJAX编辑的基础知识。感谢所有人的帮助。

Answer 1

看起来你实际上是在尝试进行就地编辑协议。您遇到的问题是用户的点击正在通过文本框/传播回到它的父容器，从而再次触发点击事件。您需要对其进行过滤，以便不选择在其内容中包含输入的td。有点像这样：

$('td[name]:not(td>input)').live(...);

虽然不是您正在寻找的直接答案，但为什么不使用像found here这样的现有插件？

我不能让'return false'让.live（）不再重复代码传播

1 个答案: