1

我对 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>
4

2 回答 2

1

事件submit只能绑定到特定类型的元素。来自 jQuery api 文档http://api.jquery.com/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 回答