1

私は JS/jquery に非常に慣れておらず (私はバックエンド開発者です)、何かを実装するのに問題があります。enter私は Django を使用しており、ボタンが押されたときに送信イベントが必要なテキスト領域を持つテンプレートがあります。これが私がそれを実装した方法です。

<div class="search multi-search">
    {% if search_str %}
        <textarea name="search_str" id="search_str">{{ search_str }}</textarea>
    {% else %}
        <textarea name="search_str" id="search_str" placeholder="Search by Lead ID's or email addresses separated by a comma."></textarea>
    {% endif %}
        <button id="thebutton" type="submit" class="btn btn-icon btn-large btn-inverse"><i class="icon-search"></i></button>
</div>


<script>
    // overriding the default enter action to submit the
    // search string on enter instead
    $('#search_str').keydown(function(e){
        // checks to see if the key pressed is the enter key and submit.
        // (13 is the code for the enter key)
        if (e.which == 13) {
            e.preventDefault();
            $('#leads_form').submit();
        }
    })
</script>

この送信により、ユーザーが (チェックボックスを使用して) 一連の項目を選択できるリストが作成されます。選択したアイテムの詳細を変更するためのアクション ボタンがあります。アクション ボタンを押すと、モーダル ウィンドウがポップアップし、要求された変更に関する詳細を提供するよう求められます。これがその作品の私のコードです。

<div id='give-reason' style="display: none">
    <p>Give your reason for this change.</p>
    <form>
        <input type="text" id="reason">
        <button type='button' id='reason-submit'>Submit your reason</button>
    </form>
</div>

$('#reason-submit').submit(function(){
    var lead_data = gather_lead_status($(this), update_type, true);
    var reason = $('#reason').val();
    lead_data(reason);
    $.fancybox.close();
    e.preventDefault();
});

.click()を使用し'#reason-submit'、ユーザーが送信ボタンをクリックすると、これは素晴らしく機能します。使ったら.submit()全然ダメ。まず、送信ボタンをクリックしてもアクションは発生しません (驚くことではありません)。enter次に、ページの更新をプッシュすると、表示されているすべてのデータが消えます。

この問題を解決する方法について何か提案はありますか?

EDIT 1:私は使用しようとし$(':focus')たが、それを機能させることができないように思われることに言及する必要があります。私はそれを間違って使用している可能性があります (驚くべきことではありません)。

編集 2: asifrc と niiru のおかげで、次のように正しく動作させることができました。

<div class="search multi-search">
   {% if search_str %}
       <textarea name="search_str" id="search_str">{{ search_str }}</textarea>
   {% else %}
       <textarea name="search_str" id="search_str" placeholder="Search by Lead ID's or email addresses separated by a comma."></textarea>
   {% endif %}
   <button id="thebutton" type="submit" class="btn btn-icon btn-large btn-inverse"><i class="icon-search"></i></button>
</div>

<div id='give-reason' style="display: none">
    <p>Give your reason for this change.</p>
    <form id='reason-submit'>
        <input type="text" id="reason">
        <button type='submit'>Submit your reason</button>
    </form>
</div>

<script>
    // overriding the default enter action to submit the
    // search string on enter instead
    $('#search_str').keydown(function(e){
        // checks to see if the key pressed is the enter key and submit.
        // (13 is the code for the enter key)
        if (e.which == 13) {
            e.preventDefault();
            $('#leads_form').submit();
        }
    })

    $('#reason-submit').submit(function(e){
        e.preventDefault();
        var lead_data = gather_lead_status($(this), update_type, true);
        var reason = $('#reason').val();
        lead_data(reason);
        $.fancybox.close();
    });
</script>
4

2 に答える 2

1

イベントは、submit特定のタイプの要素にのみバインドできます。jQuery api docs http://api.jquery.com/submit/から:

submit イベントは、ユーザーがフォームを送信しようとしたときに要素に送信されます。<form>要素にのみアタッチできます。<input type="image">明示的な 、 、またはをクリックするか<button type="submit">、特定のフォーム要素にフォーカスがあるときに Enter キーを押すと、フォームを送信できます 。

したがってtype、ボタンの属性を「送信」に変更してみて、それが機能するかどうかを確認してください。

さらに良いことに、フォームタグにIDを付けて、その送信イベントにアタッチしてみてください..

それが役立つかどうか教えてください:)

于 2013-05-09T15:38:35.683 に答える
1

.click()明らかな理由で機能します。ただし、Enter キーを押すと送信アクションがトリガーされ、フォームが投稿されます。代わりに、ボタンのタイプを送信に変更し、送信イベントのデフォルト アクションを防止します。これにより、フォームの送信をトリガーする可能性のあるすべてのアクションが処理されます。

<div id='give-reason' style="display: none">
    <p>Give your reason for this change.</p>
    <form>
        <input type="text" id="reason">
        <button type='submit' id='reason-submit'>Submit your reason</button>
    </form>
</div>

$('#reason-submit').submit(function(event){
    event.preventDefault();
    var lead_data = gather_lead_status($(this), update_type, true);
    var reason = $('#reason').val();
    lead_data(reason);
    $.fancybox.close();
    e.preventDefault();
});
于 2013-05-09T15:40:32.973 に答える