0

我希望这样设置，以便当单击某个文本正文时，会弹出一个文本输入字段，用户可以在该字段中输入数据，然后单击“保存”或“取消”按钮并发送它分别到数据库或重置值。但是，尽管使用了“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);
});

I'm sure it's much messier than anything I could've downloaded, but at least I know the basics of an AJAX edit-in-place now. Thanks for the help, all.

4

1 回答 1

2

It looks like you're essentially trying to do an edit-in-place deal. The issue you're running into is that the user's click is being propagated through the text box/spans back to it's parent container, thus triggering the click event again. You need to filter it so it doesn't select td's that have the input within it's contents. Something along the lines of this:

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

Although not a direct answer to what you're looking for why not use an existing plugin like one found here?

于 2010-02-11T13:10:44.820 回答