Question

我正在尝试加载不同的视图，而无需使用JQUERY重新加载＆gt; AJAX。它第一次正常工作，但第二次触发调用并加载页面。

这是我正在使用的按钮：第一次：

<p><a href="{{ URL::route('onboarding-ajax', ['i' => '2']) }}" id="next-step" next-step-id="2">Start <i class="icon arrow-right"></i></a></p>

第二次：

<p><a href="{{ URL::route('onboarding-ajax', ['i' => '3']) }}" id="next-step" next-step-id="3" >Next</a></p>

这是脚本：

    <script>
    $('#next-step').on('click', function (e) {
        e.preventDefault();

        var that    = $(this),
            url     = that.attr('href'),
            type    = 'GET',
            step_id = that.attr('next-step-id'),
            width   = (step_id / 32)*100 + '%';

        $.ajax({
            url: url,
            type: type,

            success: function(response) {
                $('#content-wrap').html(response.view);
                window.history.pushState({path:url},'',url);
                return false;
            }
        });
    });
</script>

知道做错了什么？

Answer 1

如果您的#next-step元素位于#content-wrap内，则在您替换#content-wrap内容时它将消失。如果新内容中还包含#next-step，则它是具有相同ID的不同的元素，并且不会像前一个那样附加click处理程序那样。

挽救它的最简单方法是使用“实时”处理程序 - 不在#next-step上，而是在父项上。试试这个：

$('#content-wrap').on('click', '#next-step', function (e) {

这会告诉#content-wrap注意click上的#next-step事件。由于您不替换#content-wrap本身，此处理程序将保持不变，即使替换#next-step也会捕获事件。

更改页面内容的AJAX不会多次使用？

1 个答案: