Javascript Ajax加载事件递增1

我有一个简单的文本区域，用户可以在其中输入文本，一旦点击返回键，文本就会通过AJAX传递到URL。我的问题是，第一次按return键时，文本数据发送一次，第二次发送两次，然后每次递增一次

经过一番阅读后，我意识到如果我使用表单提交，我必须解除它的绑定以防止这种情况发生。我已经尝试添加一个值标志来阻止多个事件，但只到了让它触发一次的程度

我的代码如下。任何关于如何防止递增事件的指导都将不胜感激，因为您可能会告诉我，我对Javascript的信心/知识并不是最好的。谢谢大家!

$(function() {
    $("#myTextarea").keypress(function(e) {
        // If the user hits the return key
        if(e.which == 13) {
            e.preventDefault();
            $.ajax({
            success: function(){
                var modal = $('#myModal'), modalBody = $('#myModal .modal-body');
                modal
                    // Load the webpage result within the modal Body
                    .on('show.bs.modal', function () {
                        modalBody.load('http://www.things.co.uk/things' + document.getElementById('myTextArea').value)
                    })
                    .modal();
                    // Hide the modal after five seconds
                    myModalTimeout = setTimeout(function() {
                        $('#myModal').modal('hide');
                            }, 5000);
                }
            });
        }
    });
});

---

Edit:我通过对模式事件via使用one（）解决了这个问题。谢谢大家。

如果myTextarea div上没有更多的事件处理程序，下面的代码就足够了。
如果有多个事件处理程序附加到按键事件，则必须使用命名函数，并使用“更多”将其删除

---

只能附加事件处理程序一次。我假设您在AJAX响应中获得JS，并在每次AJAX加载时一次又一次地执行它。移除并重新连接处理程序是一个很难解决的问题

为了避免多次附加事件处理程序，只需将脚本放在页面中不被AJAX重新加载的部分，这样事件只附加一次

您甚至可以将事件处理程序附加到ajax使用委派事件重新加载的元素：

使用此技术，可以将事件处理程序附加到ajax未重新加载的容器父元素，并处理由筛选器指定的重新加载子元素的事件

$( "#container" ).on("<event>", "<children filter>", function( event ) {
  // code to handle the event
});

$（“#容器”）。关于（“，”，函数（事件）{
//处理事件的代码
});

注意，在这个示例中，

#container

是ajax没有重新加载的元素。

是一个jquery选择器，用于选择要处理其事件的子级。（

显然是事件名称，如click或keyPress）

---

说明：当事件在子元素中触发时，它会弹出到容器中。容器捕获它，并检查子对象是否通过过滤器。如果是这样，则会处理通风口。

不幸的是，off（）没有产生任何影响，到目前为止只有一个事件处理程序。谢谢你！谢谢，你的解释很有道理。奇怪的是，我将处理程序附加到了我的.container div类，但它仍然在递增。我将对此进行研究，您的解决方案比我之前尝试的更符合逻辑。

$( "#container" ).on("<event>", "<children filter>", function( event ) {
  // code to handle the event
});