Question

我有一个网站，点击后使用ajax将帖子直接加载到页面。

但是......我在同一页面上也有一个ajax联系表格。但是，如果我先点击一个帖子，然后想要稍后发送一条消息，它就会失败。但是，如果我刷新页面并直接转到联系表单并发送消息，则发送时不会失败。有没有办法我可以“重新加载”ajax而不刷新页面，这样你就可以在我的网站上用ajax做多件事？

$(document).ready(function() {

    function yournewfunction() {

        var requestCallback = new MyRequestsCompleted({
            numRequest: 3,
            singleCallback: function() {
                alert("I'm the callback");
            }
        });

        var width = 711;
        var animationSpeed = 800;
        var pause = 3000;
        var currentSlide = 1;


        var $slider = $("#slider");
        var $slideContainer = $(".slides");
        var $slides = $(".slide");
        var $toggleRight = $("#right");
        var $toggleLeft = $("#left");

        $toggleRight.click(function() {
            $slideContainer.animate({
                'margin-left': '-=' + width
            }, animationSpeed, function() {
                currentSlide++;
                if (currentSlide === $slides.length) {
                    currentSlide = 1;
                    $slideContainer.css('margin-left', 0);
                }
            });
        });

        $toggleLeft.click(function() {
            if (currentSlide === 1) {
                currentSlide = $slides.length;
                $slideContainer.css({
                    'margin-left': '-' + width * ($slides.length - 1) + 'px'
                });
                $slideContainer.animate({
                    'margin-left': '+=' + width
                }, animationSpeed, function() {
                    currentSlide--;
                });
            } else {
                $slideContainer.animate({
                    'margin-left': '+=' + width
                }, animationSpeed, function() {
                    currentSlide--;
                });
            }
        });




        if ($(".slide img").css('width') == '400px' && $(".slide img").css('height') == '400px') {
            $(".options").css("width", "400px");
            $(".slide").css("width", "400px");
            $("#slider").css("width", "400px");
            $(".video-frame").css("width", "400px");
            var width = 400;

        };



        if ($("#slider img").length < 2) {
            $("#right, #left").css("display", "none");

        };



        if ($("iframe").length > 0 && $("iframe").length < 2) {
            $(".options").css("width", "711px");
            $(".slide").css("width", "711px");
            $("#slider").css("width", "711px");
            $(".video-frame").css("width", "711px");
            $('.slide').hide();
            var width = 711;


        };

        if ($(".slide img").css('width') > '400px' && $(".slide img").css('width') < '711px') {
            $(".options").css("width", "600px");
            $(".slide").css("width", "600px");
            $("#slider").css("width", "600px");
            $(".video-frame").css("width", "600px");
            var width = 600;

        };

    }

    $.ajaxSetup({
        cache: false
    });
    $(".post-link").click(function(e) {
        e.preventDefault()
        var post_link = $(this).attr("href");
        $("#single-post-container").html('<img id="loads" src="http://martinfjeld.com/wp-content/uploads/2015/09/Unknown.gif">');
        $("#single-post-container").load(post_link, function(response, status, xhr) {
            if (status == "error") {
                var msg = "Sorry but there was an error: ";
                $("#error").html(msg + xhr.status + " " + xhr.statusText);
            } else {
                $("#main-content").fadeIn(500);
                $("body").addClass("opens");
                yournewfunction();


            }
        });

        requestCallback.requestComplete(true);
        return false;
    });




});


$(function() {

    var form = $('#ajax-contact');

    var formMessages = $('#form-messages');


    $(form).submit(function(event) {
        event.preventDefault();

        var formData = $(form).serialize();

        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        }).done(function(response) {
            // Make sure that the formMessages div has the 'success' class.
            $(formMessages).removeClass('error');
            $(formMessages).addClass('success');

            // Set the message text.
            $(formMessages).text(response);

            // Clear the form.
            $('#name').val('');
            $('#email').val('');
            $('#message').val('');
        }).fail(function(data) {
            // Make sure that the formMessages div has the 'error' class.
            $(formMessages).removeClass('success');
            $(formMessages).addClass('error');

            // Set the message text.
            if (data.responseText !== '') {
                $(formMessages).text(data.responseText);
            } else {
                $(formMessages).text('Oops! An error occured and your message could not be sent.');
            }
        });
    });


});

Answer 1

虽然很难准确地了解正在发生的事情但却无法看到HTML的上下文，如果没有给我们更具体的描述确切地说哪行代码无法执行，这可能是因为一个Ajax调用正在取代一堆破坏所有事件处理程序的HTML。因此，当您尝试执行第二次Ajax操作时，它的点击处理程序不再有效，因此没有任何反应。

替换DOM元素会丢失附加到原始DOM元素的所有事件处理程序。使用.html()或分配给.innerHTML会替换该元素中的所有DOM元素，从而丢失所有事件处理程序。

对此的典型解决方案是在替换您希望事件处理程序打开的内容之后重新安装事件处理程序，或者从未替换的父元素使用委托事件处理。

以下是有关委派事件处理的一些参考：

JQuery Event Handlers - What's the "Best" method

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

Should all jquery events be bound to $(document)?

两个不同的ajax请求没有刷新页面

1 个答案: