javascript - 使用jQuery单击时，html中的li标记不显示任何操作

在试图弄清楚为什么这段简单的代码无法正常工作一天之后，我不得不问别人，因为我无法弄清楚。

HTML：

<li><button id="button-middle" type="button"></button>
<ul id="list-middle" style="display: none;"></ul>
</li>

jQuery：

$(document).ready(function () {
    $('#button-middle').click(function () {
        $.post('file.php', {data_1: $('#select_1 option:selected').text(), data_2: $('#select_2 option:selected').text()}, function (data) {
            $('#list-middle').html(data);
        });
    });
});

$(document).ready(function () {
    $('#list-middle li').click(function () {
        alert('test');
    });
});

该按钮是包含三个按钮的ul的一部分，这个按钮是中间的一个。
file.php只是包含一个简单的回显，并插入了已发送的数据。输出是预期的（ul中的li标签），但是当我单击这些li标签之一时，什么也没有发生。这是为什么？

只是要非常清楚，这是php文件：

if (isset($_POST['data_1']) and isset($_POST['data_2'])) {
        $data_1 = $_POST['data-1'];
        $data_2 = $_POST['data_2'];
        echo '<li data-value="right" id="to_right"><span>&#8594;&nbsp;Von '.$data_1.' nach '.$data_2.'</span></li>
                                <li data-value="left" id="to_left"><span>&#8594;&nbsp;Von '.$data_2.' nach '.$data_1.'</span></li>
    ';
    }

感谢您超过一天的帮助，这让我发疯了。

最佳答案

绑定动作（如单击动作）时，应定义上下文（在这种情况下为文档），以便处理动态加载的内容。认为它应该工作：

$(document).on('click','#list-middle li', function(e){ alert('test'); });