Question

使用JQuery的简单AJAX测试页面。显示的页面最初显示按钮（BUTTON1）。点击它，它将通过script.js运行react.php。 react.php将通过span元素替换BUTTON1和BUTTON2。这一切都有效。

这是出错的地方。点击BUTTON2应该通过script2.js运行react2.php。 react2.php然后应该用文本“SUCCESS”替换BUTTON2。但是，当点击BUTTON2时，页面会刷新（并再次显示BUTTON1），而不是这样做。

当初始的begin.php页面上的按钮类从button1更改为button2时，按钮成功替换为来自react2.php的字符串。我无法深究这一点。

如何阻止刷新以使页面在span元素中显示“SUCCESS”？提前谢谢！

beginning.php

 <html>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="script2.js"></script>
<?php
echo "<span class='span_display'>
    <a href='' id='button1' class='button1'>BUTTON1</a>&nbsp;
</span>";
?>
</html>

的script.js

$(function() {
    $(".button1").click(function() {
        $.ajax({
            url: "react.php",
            cache: false,
            success: function(html) {
                $(".span_display").html(html);
            }
        });
        return false;
    });
});

script2.js

...(all the same except)
   url: "react2.php",

react.php

<?php
echo "<a href='' id='button2' class='like_button2'>BUTTON2</a>&nbsp;";
?>

react2.php

<?php
echo "SUCCESS";
?>

Answer 1

您的问题是由第二个链接上缺少的点击处理程序引起的，因为它是通过ajax动态添加的。通常建议使用delegated events而不是直接将处理程序附加到元素：

function handler(uri) {
    $.ajax({
        url: uri,
        cache: false,
        success: function(html) {
            $(".span_display").html(html);
        }
    });
}

$(document)
    .on("click", "#button1, #button2", function(e) {
        e.preventDefault();
        var uri = $(this).hasClass("button1") ? "react.php" : "react2.php";
        handler(uri);
    });
});

jQuery documentation解释说它很壮观，所以我只是引用它：

委派事件的优势在于它们可以处理来自的事件   稍后添加到文档中的后代元素。通过   选择一个保证在当时存在的元素   委托事件处理程序附加，您可以使用委托事件   避免频繁附加和删除事件处理程序的需要。这个   element可以是a中视图的容器元素   例如，模型 - 视图 - 控制器设计，或者如果事件是文档   handler希望监视文档中的所有冒泡事件。该   文档元素在之前的文档头部中可用   加载任何其他HTML，因此可以安全地在那里附加事件   等待文件准备好。

除了能够处理后代元素的事件外   尚未创建，委托事件的另一个优势是他们的   当许多元素必须存在时，开销要低得多   监测。

Answer 2

问题是button2是由Ajax创建的。

在按钮2存在之前，在第一次加载页面时执行script2.js，因此无法将任何事件绑定到button2（它不存在）。

创建按钮2然后单击它时，它将作为提交页面的普通按钮。

~~要么在加载按钮2后强制脚本2运行。您可以通过在创建按钮后在脚本1中成功调用script2中的方法来执行此操作。~~

~~或者您可以查看jquery中的直播事件，他们可以锁定创建的新元素。~~

~~在这种情况下，我会选择选项1，它更干净，更可预测。~~

使用nietonfir的脚本，更容易。

AJAX强制页面刷新（但不应该）

2 个答案: