0

使用 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”？提前致谢！

开始.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>

脚本.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",

反应.php

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

反应2.php

<?php
echo "SUCCESS";
?>
4

2 回答 2

2

您的问题是由于第二个链接上缺少单击处理程序造成的，因为它是通过 ajax 动态添加的。通常建议使用委托事件而不是将处理程序直接附加到元素：

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 文档解释得非常好，所以我只引用它：

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

除了能够处理尚未创建的后代元素上的事件之外，委托事件的另一个优点是当必须监视许多元素时，它们的开销可能会大大降低。

于 2013-10-20T22:59:32.520 回答
0

问题是 button2 是由 Ajax 创建的。

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

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

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

或者您可以查看 jquery 中的实时事件，它们可以锁定创建的新元素。

不过，在这种情况下，我会选择选项 1，它更清晰、更可预测。

使用 nietonfir 的脚本，更简单。

于 2013-10-20T22:43:58.900 回答