Question

我正在尝试动态添加图片标记

  var img = $('<img id="dynamic" class="removed">'); //Equivalent: $(document.createElement('img'))
            img.attr('alt', "remove");
            imageForm.append(img)

我在哪里添加了这个，我想要一个点击功能

所以我写了

$('.removed').on('click', function (e) {
    console.log("e", e);
    e.preventDefault();
});

但事件未被触发。我该怎么做才能解决这个问题？

Answer 1

对于动态创建的元素，您需要通过$(document).on('click', '.removed', function (e) { console.log("e", e); e.preventDefault(); });附加事件并传递要为其附加处理程序的选择器

@csrf_exempt
@api_view(['GET', 'POST'])
def EmployeeList(request):

    if request.method == 'GET':
        employees = PersonalInfo.objects.all()
        serializer = PersonalInfoSerializer(employees, many=True)
        return JsonResponse(serializer.data, safe=False)

    elif request.method == 'POST':
        data = JSONParser().parse(request)
        print data
        serializer = PersonalInfoSerializer(data=data)
        if serializer.is_valid():
            serializer.save()
            return JsonResponse(serializer.data, status=201)
        return JsonResponse(serializer.errors, status=400)

Answer 2

由于您要动态添加图像，因此您编写的单击函数将找不到具有class = .removed的任何元素。对于这种情况，您需要将函数绑定到已存在的元素，即静态元素。您可以将函数绑定到图像的父静态元素，或者只将它绑定到文档。所以你的代码变成了：

$(document).on('click','.removed',function(e){ 
    e.preventDefault();
    console.log("e",e);
});

附加html中的事件触发问题？

2 个答案: