0

これはedit-in-place-using-ajaxからの直接的なリフトですが、機能していません。誰でも理由を提案できますか？保存ボタンもキャンセルボタンも何もしません。クリックしたときに saveButton と cancelButton がクリックイベントに割り当てられたjqueryコードを起動していないことがわかりました。

<script src="/jscript/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("#editInPlace").click(function(){
        var textarea = '<div><textarea rows="5" cols="30">' + $(this).html() + '</textarea>';
        var button = '<div><input type="button" value="SAVE" class="saveButton" /> OR <input type="button" value="CANCEL" class="cancelButton"/></div></div>';
        var revert = $(this).html();
        $(this).after(textarea+button).remove();
    });
    $('.saveButton').click(function(){saveChanges(this, false);});
    $('.cancelButton').click(function(){saveChanges(this, revert);});
    function saveChanges(obj, cancel) {
        if (!cancel) {
            var t = $(obj).parent().siblings(0).val();
            alert('new text='+t);
        }else {
            var t = revert;         //orig code had cancel;
            }
        $(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove()
    }

});
</script>



 <div id='editInPlace'>we are going to change this comment.</div>

@nbrook の画像を追加する (彼の提案したコードに基づく)...

初期表示 →初期表示

最初のクリックで ->最初のクリックで

テキストエリア内の2回目のクリック->2回目のクリックで...

これは続きます...

4

3 に答える 3

1

ページの読み込み時に存在しない要素にイベント ハンドラーをバインドしようとしているようです。これらを変更します。

$('.saveButton').click(function(){saveChanges(this, false);});
$('.cancelButton').click(function(){saveChanges(this, revert);});

に：

$('div#editInPlace').on('click', 'input.saveButton', function(){saveChanges(this, false);});
$('div#editInPlace').on('click', 'input.cancelButton', function(){saveChanges(this, revert);});
于 2012-10-03T00:02:57.010 に答える
0

これは、基本的なことであっても、あまり良いチュートリアルではないようです。変数のスコープに注意してください。1 つのラッピングvar revert内で宣言すると、元のブロックにネストされていない限り、外側のスコープまたは他のブロックの内側では使用できません。したがって、他のすべての機能では、存在しません。それを参照すると が発生し、JS インタープリターはすべてのエラーで中断するため、アラートは表示されません。これは、JS エラー コンソールに表示されます。この変更を試してください：function() {}function() {}revertReferenceError

$(document).ready( function() {
    var revert;

    $("#editInPlace").click( function() {
        var textarea = '<div><textarea rows="5" cols="30">' + $(this).html()
                     + '</textarea>';
        var button = '<div><input type="button" value="SAVE" class="saveButton" />'
                   + 'OR <input type="button" value="CANCEL" class="cancelButton"/>'
                   + '</div></div>';

        revert = $(this).html();

        //$(this).after(textarea+button).remove();

        // to have this work more than once, better to do (corresponding change below)
        $(this).html(textarea+button);
    });

    // use delegated event handler for dynamically generated elements
    $('#editInPlace').on( 'click', '.saveButton', function() {
        saveChanges(this, false);
        return false;
    })
    .on( 'click', '.editButton', function() {
        saveChanges(this, revert);
        return false;
    }) // (you could also combine these into a single handler, based on `this`)

    .on( 'click', 'textarea', function() {
        return false;
    });
});

// no need for this in ready handler
function saveChanges(obj, cancel) {
    if (!cancel) {
        var t = $(obj).parent().siblings(0).val();
        alert('new text='+t);
    } else {
        var t = cancel;  // use cancel, that's why you pass it in...revert not in scope
        ///var t = revert; // orig code had cancel;
    }

    // If you use the approach below, your div clicks will only work once
    //$(obj).parent().parent().after('<div id="editInPlace">'+t+'</div>').remove()

    // Instead, do:
    $(obj).closest('#editInPlace').html(t); // replace the current html with the old stuff
}

注: 実際にはマークアップに保存ボタンとキャンセル ボタンがあり、それらは実際には関連性がないため、投稿に含めないことを選択しただけだと思います...

訂正：追加した場所を見つけました...

于 2012-10-03T00:27:53.737 に答える
0

こんにちは、この質問を閉じます。これに時間を割くには多すぎると思います。私は jeditable を使うことにしました。見栄えがよく、ブラウザにロードするのに十分なほど小さい.

彼らの助けと時間をありがとう。申し訳ありませんが、ルートを変更して、ジェディタブル ライブラリを選択する必要がありました。必要以上のコードとオプションがありますが、上記のコード (および多くの変更) を使用したテストでは、これまたはその間違った効果が生じていました。

于 2012-10-03T16:46:49.860 に答える