javascript - Ajax 加载事件加一

Question

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

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

我的代码如下。任何关于如何防止递增事件的指导将不胜感激 - 因为你可能会告诉我我对 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 加载时一次又一次地执行它。删除并重新附加处理程序是一个很棘手的解决方案。

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

您甚至可以使用委托(delegate)事件将事件处理程序附加到由 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)。

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