php - ajax收到的链接无法点击

Question

过去几天我一直在摆弄 ajax，但在保持链接可点击方面我陷入了困境。

我有一个包含一些列表项的菜单，并在外部 javascript 文件中附加了一个事件处理程序，如下所示:

document.getElementById('home').addEventListener("click", navigate, false);

适用于所有元素。在导航功能中我使用的是ajax:

$.ajax({
        type: "POST",
        url: "php/navigation.php",
        data: "clicked=" + this.id,
        dataType: 'json',
        async: false,
        success: function(response) {
            if (response && response.text1 && response.text2) {
                $("#leftContent").html(response.text1);
                $("#rightContent").html(response.text2);
            }
        }
    });

我使用 json 数据类型，因此我可以分隔两个 div #leftContent 和 #rightContent 的数据。现在 php 文件进行一些简单的查询以从数据库获取数据。 不过这效果很好!填充到 html 对象中的代码有效。我用 css 对其进行样式设计，使其看起来不错，看起来上面的解决方案没问题。

但是当我用 navigation.php 文件中的链接进行响应时，它不可单击。 所以想象一下 navigation.php 看起来像这样(简化的)

$content = json_encode(array(
            'text1' => '<a href="127.0.0.1">link</a>"',
            'text2' => 'This text would go in response text 2'
        ));

echo $content;

我尝试仅使用 href="#"并使用 onlick 方法并使用函数来处理此问题，但仍然没有任何反应。我确实在网上进行了搜索，发现了bind()方法，它允许添加事件处理程序。 好吧，我可以这样做，但是如果我收到来自 php 文件的链接列表怎么办？某种:

$content = json_encode(array(
            'text1' => '<a href="http://...">link</a><br /> <a href="http://...">link</a><br /> <a href="http://...">link</a><br /> ',
            'text2' => 'This text would go in response text 2'
        ));

echo $content;

我可以将事件处理程序添加到整个列表，但不能添加到每个元素。 有一个简单的解决方案吗？ 使用多维数组作为响应并解析数据将是一个想法。还是有一种简单的方法可以做到这一点？

Answer 1

您可以使用jQuery on绑定(bind)容器，允许您在替换链接时维护事件:

类似于:

$('#leftContent').on('click', 'a', navigate);