在html中想实现 Ajax 的应用，请看代码，为什么页面上只有商人照片，点击照片也没有反应。

想在网页上实现一个功能：一共9位商人，每个人有很多任务，。请在网页最上方横向展示9位商人的图片，点击图片，不跳转页面的情况下，在下方的左侧展示该商人所有任务的名称列表，右侧默认显示选中商人第一个任务的详细内容，点击其他任务名称后， 不跳转页面的情况下右侧显示选择任务的任务内容。

用的是django框架。


```python
def index(request):
    merchants = Merchant.objects.all()
    tasks = Task.objects.all()
    return render(request, 'base.html', {'merchants': merchants, 'tasks': tasks})


def get_merchant_tasks(request):
    if request.method == 'GET':
        merchant_id = request.GET.get('merchant_id')
        tasks = Task.objects.filter(merchant=merchant_id)
        task_list = []
        for task in tasks:
            task_list.append({'name': task.name, 'details': task.details})
        return JsonResponse({'tasks': task_list})
```python

urlpatterns = [
    path('', index, name='task_index'),
    path('get_merchant_tasks/', get_merchant_tasks, name='get_merchant_tasks'),
]

这是代码：

html>
<html>
<head>
    <meta charset="utf-8">
    <title>商人任务列表title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <style type="text/css">
        .merchant-img {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .task-name {
            cursor: pointer;
        }
    style>
head>
<body>
    <div class="container-fluid mt-3">
        <div class="row">
            <div class="col-md-3">
                <div class="list-group">
                    {% for merchant in merchants %}
                    <a href="#" class="list-group-item d-flex align-items-center merchant-item" data-merchant="{{ merchant.id }}">
                        <img src="{{ merchant.photo.url }}" class="merchant-img">
                        {{ merchant.name }}
                    a>
                    {% endfor %}
                div>
            div>
            <div class="col-md-9">
                <h2 id="task-name">h2>
                <p id="task-details">p>
            div>
        div>
    div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.merchant-item').click(function() {
                var merchant_id = $(this).data('merchant');
                $.ajax({
                    url: '/get_merchant_tasks/',
                    data: {'merchant_id': merchant_id},
                    dataType: 'json',
                    success: function(data) {
                        var task_list = '';
                        for (var i = 0; i < data.tasks.length; i++) {
                            task_list += 'tasks[i].details + '">' + data.tasks[i].name + '';
                        }
                        $('#task-name').text(data.tasks[0].name);
                        $('#task-details').text(data.tasks[0].details);
                        $('.list-group').html(task_list);
                    }
                });
            });
            $(document).on('click', '.task-name', function() {
                var task_name = $(this).text();
                var task_details = $(this).data('task-details');
                $('#task-name').text(task_name);
                $('#task-details').text(task_details);
            });
        });
    script>
body>
html>



请问 页面中为什么只有商人的照片和名字点击了也没有用。



task_list += 'tasks[i].details + '">' + data.tasks[i].name + '';

这句有错，浏览器控制台看看就知道了