0

テキストエリアにテキストが入力された後、このクラスをターゲットにして、ユーザーがEnterキーを押して送信できるようにします。

cmnt += '<td class="cmnt_save" data-id="' + id + '">Save Comment</td>';

jquery を使用して Save comment td クラスをターゲットにしたい

私が試したことはすべて惨めに失敗しました..jquery、JS、およびいくつかのインラインJSも使用してみました。

私のテーブルでの私の関数は次のとおりです。

// This function retrieves comments
function get_comments(id ,afterCtl ,ctl) {
    var cmnt = '';

show_loading('.loading_box');

// Create the new row in the database - ajax returns json version.
var add_url = '/ajax/project_comment_list.php?id=' + id;

var slot = $.getJSON(add_url)
    .done(function(data) {
        // Draw the entire comment-block then display it

        cmnt = '<tr class="cmnts">';
        cmnt += '    <td colspan="11">';
        cmnt += '        <table>';
        cmnt += '            <tr class="cmnt_add">';
        cmnt += '                <td class="cmnt_text">'
        cmnt += '                    <input type="text" id="cmnt_new" name="cmnt_new" rows="1">';
        //cmnt += '                    <textarea id="cmnt_new" name="cmnt_new" rows="1"></textarea>';
        cmnt += '                </td>';
        cmnt += '                <td></td>';
        cmnt += '                <td></td>';
        cmnt += '                <td class="cmnt_save" data-id="' + id + '">Save Comment</td>';
        cmnt += '            </tr>';

        $.each(data.ProjectComments, function (index, value) {
            cmnt += add_comment_row(value.TEXT ,blank_if_undefined(value.EMP_INIT) ,value.ENTER_DATE);
        });

        cmnt += '        </table>';
        cmnt += '    </td>';
        cmnt += '</tr>';

        remove_comments(ctl);

        $(afterCtl).after(cmnt);
        $('#cmnt_new').focus();

        $(ctl).addClass('cmnt_active');
        $(ctl).html('&nbsp;-&nbsp;');

        //register the event
        $('td.cmnt_save').click(function(){
            add_comment($(this));
        });

        comment_shown = id;
    })
    .fail(function(jqxhr, status, error) {
        hide_loading('.loading_box');
        show_error('There was an error pulling the comments.');
    });

    //wire up the event
    $('textarea#cmnt_new').keydown(function(e) {
        if(e.which == 13) {
            e.preventDefault();
            alert('Cripes!  You pressed enter!');
        }
    })

}

誰かがこのタスクを達成するのに役立つか、この機能を正しく行うための他の/より良い方法をお勧めします。助けてくれてありがとう。

4

3 に答える 3

1

テキストフィールドのIDは何ですか..? #cmnt_new?

$('#static-parent').on('keyup', '#cmnt_new', function(ev){ 
    if(e.keyCode == 13)
    {
        // do whatever here
    }
});

#static-parent動的にロードされず、その#cmnt_new内部にあるもの (親)はどこにありますか。私はあなたもできると信じています$(document).on(..。スクリプトが動的に読み込まれたコンテンツで機能するには、デリゲートを使用して、ページ上で静的なものを処理する必要があります。

于 2013-11-06T00:46:20.257 に答える
1

私があなたを正しく理解していれば、ユーザーが相対テキスト領域でエンターキーを押した後にユーザーが追加したコメントを保存したいだけです。

次のようなものが欲しいと思います：http://jsfiddle.net/5JKy8/2/

HTML

<table id="comments">
    <tr>
        <th>Name</th>
        <th>Comment</th>
    </tr>
    <tr>
        <td>Foo</td>
        <td><textarea class="comment" rows="1" id="333"></textarea></td>
    </tr>
    <tr>
        <td>Bar</td>
        <td><textarea class="comment" rows="1" id="666"></textarea></td>
    </tr>                
</table>

Javascript

$(document).ready( function() {

    $("body").on("keydown",".comment", function(e) {
        if(e.which == 13) {            
            var comment = $(this).val(),
                id = $(this).data("id");

            saveComment(comment,id).done( function() {
                $(this).parent("td").text(comment);
            });
        }
    });    

});

function saveComment(comment,id) {
    return $.ajax({
        url: 'yourScript.php',
        data: {comment:comment,id:id}
    });
}

注: jsfiddle では、saveComment() はデモ用にブール値を返しますが、コメント アウトされたコードを使用してください。

于 2013-11-06T05:28:20.123 に答える
0

Event オブジェクトのkeyCodeプロパティを使用しますonkeyup。event.keyCode === 13入力ボタンの場合、次のようになります。

$('#cmnt_new').keyup(function(e){
  if(e.keyCode === 13){
    // do your thing here
  }
});

<input type='text' />で閉じることを組み合わせたことに注意してください</textarea>。

于 2013-11-06T00:24:07.497 に答える