Ajax 加载事件递增一

Question

我有一个简单的文本区域，用户可以在其中输入文本，然后一旦他们按下返回键，这些文本就会通过 AJAX 传递到 URL。我的问题是，在第一次按下返回键时，文本数据发送一次，第二次发送两次，依此类推，每次都增加我的。

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

我的代码如下。任何有关如何防止递增事件的指导将不胜感激 - 因为您可能会告诉我对 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);
                }
            });
        }
    });
});

编辑：我通过http://www.andismith.com/blog/2011/11/on-and-off/ 为我的模态事件使用 one() 解决了这个问题。谢谢大家。

Answer 1

您只能附加一次事件处理程序。我想您在 AJAX 响应中获取了 JS，并在每次 AJAX 负载时一次又一次地执行它。删除和重新附加处理程序是一个 hacky 解决方案。

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

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

使用这种技术，您可以将事件处理程序附加到未由 ajax 重新加载的容器父元素，并处理由过滤器指定的重新加载的子元素的事件。

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

请注意，在此示例中，#container 是未由 ajax 重新加载的元素。 <children filter> 是一个 jquery 选择器，用于选择必须处理其事件的子代。 （<event> 显然是事件名称，如 click 或 keyPress）。

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

Answer 2

如果下面的 myTextarea div 代码上没有更多事件处理程序就足够了。
如果有多个事件处理程序附加到按键事件，您将不得不使用命名函数并使用 $.unbind() 更多 on how to do this 删除它。

$(function() {
    $("#myTextarea").off();
    $("#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);
                }
            });
        }
    });
});