Question

我是JS / jquery的新手（我是后端开发人员）并且在实现某些方面遇到了麻烦。我正在使用Django，并且有一个模板，当按下enter按钮时，该文本区域需要有一个提交事件。以下是我实施的方法。

<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页面刷新 - 所有显示的数据都会消失。

有关如何解决此问题的任何建议？

编辑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>

Answer 1

submit事件只能绑定到某些类型的元素。来自jQuery api docs http://api.jquery.com/submit/：

当用户尝试时，提交事件将发送到元素提交表格。它只能附加到<form>元素。表格可以通过单击显式提交， <input type="image">或<button type="submit">，或按Enter键当某些表单元素具有焦点时。

~~因此，请尝试将按钮的type属性更改为“提交”，然后查看是否有效。~~

更好的是，只需给你的表单标记一个id并尝试附加到那个提交事件..

如果有帮助，请告诉我:)。

Answer 2

.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();
});

两个jquery提交，每个一个动作

2 个答案: