Question

我有一个简单的textarea，用户可以输入文本，然后一旦点击返回键，就会通过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

如果myTextarea div代码上没有其他事件处理程序就足够了。
如果有多个事件处理程序附加到keypress事件，则必须使用命名函数并使用$.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);
                }
            });
        }
    });
});

Answer 2

您必须只附加一次事件处理程序。我想你在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。

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

Ajax加载事件增加一个

2 个答案: