Щелчок мышью в Javascript (вниз / вверх) не вызывается

У меня проблема с вызовом onmousedown.

У меня есть веб-страница (HTML), на которой я хочу аннотировать несколько изображений (речь идет о создании мусорных тегов на изображениях). Я сделал слайдер с кнопками next и previous для перехода от одного изображения к другому.

это выглядит так:

это изображение первое, индекс 0 (видно на консоли). прямоугольники добавляются на «холст» при нажатии на класс в меню слева. У каждого изображения есть свой «холст» (мы замечаем, что «холст» также имеет индекс 0, поэтому это «холст» изображения).

Для перемещения прямоугольников я использую onmousedown / onmouseup, и он работает, все работает хорошо на первом изображении.

Но во втором и в следующих случаях это не работает.

После нажатия на кнопку next (на скриншоте скрыта консолью). Мы видим, что изображение и холст изменились, индекс - 1, предыдущий прямоугольник перерисовывается на этом холсте (по желанию), но когда я нажимаю на прямоугольник, чтобы переместить его, я не могу, и у меня даже нет console.info последних кликов, как на предыдущем скриншоте. Нажимаю, но ничего не происходит, функция не вызывается. Я помещаю onclick = alert (id) прямо в тег HTML Canvas, чтобы посмотреть, работает ли он, и да, он работает. У меня появляется предупреждение с правильным идентификатором в нужный момент, когда я нажимаю на «холст».

Таким образом, я могу добавлять и перемещать (onmousedown, onmouseup) прямоугольники на первом холсте первого изображения, я могу переходить с помощью кнопки «далее» к следующему изображению и его «холсту», прямоугольники «перерисовки» предыдущего изображения сделано, но при нажатии на «холст» ничего не происходит, вызов функции не выполняется, иначе у меня будут журналы в консоли.

Любая идея?

Вот небольшой код из другой части.

HTML:

<div class = "containerCaptures">
    {% for capture in captureSelectionOfTagSession %}
        <div class = "jsoda-workspace">
            <canvas class = "jsoda-canvas"></canvas>
            <img src = "{{ capture.image.url }}" alt = "{{ capture.name }} class = "jsoda-image" id = "{{ capture.id }}">
        </div>
    {% empty %}
        <div>
            <p>Aucune image.</p>
        </div>
    {% endfor %}
</div>

JavaScript для слайдера изображений:

var currentIndex = 0,
items = $('.containerCaptures div'),
itemAmt = items.length;

function displayFirstImg(){
    var firsItem = $('.containerCaptures div').eq(currentIndex);
    firsItem.css('display','inline-block');
    loadImage();
}

function cycleItems() {
    var item = $('.containerCaptures div').eq(currentIndex);
    items.hide();
    item.css('display','inline-block');
    loadImage();
}

$('#btNext').click(function() {
    currentIndex += 1;
    if (currentIndex > itemAmt - 1) {
        currentIndex = 0;
    }
    cycleItems();
});

$('#btPrev').click(function() {
    currentIndex -= 1;
    if (currentIndex < 0) {
        currentIndex = itemAmt - 1;
    }
    cycleItems();
});

А в другой файл JavaScript:

function loadImageOnStart() {
    image = document.getElementsByClassName("jsoda-image")[currentIndex];
    console.info("ici loadImage");

    console.info(currentIndex);

    var jsodaCanvas = document.getElementsByClassName("jsoda-canvas")[currentIndex];
    jsodaCanvas.width = image.width;
    jsodaCanvas.height = image.height;
    console.info("ici loadImageCanvas");
    console.info(currentIndex);

    mousedown = false;
    x1 = -1;
    y1 = -1;
    x2 = -1;
    y2 = -1;

    redraw();
}

document.getElementsByClassName("jsoda-canvas")[currentIndex].onmousedown = function(e) {
    console.info("onmousedown");
    console.info(currentIndex);
    mousedown = true;
    clickedArea = findCurrentArea(e.offsetX, e.offsetY);
    if (clickedArea.box != -1) {
        for (var i = 0; i < boxes.length; i++) {
             boxes[i].selected = false;
        }
        boxes[clickedArea.box].selected = true;
    } else {
        for (var i = 0; i < boxes.length; i++) {
            boxes[i].selected = false;
        }
    }
    x1 = e.offsetX;
    y1 = e.offsetY;
    x2 = e.offsetX;
    y2 = e.offsetY;
    redraw();
};

Это всего лишь кусок всего кода, код длинный ...

Не стесняйтесь спрашивать, нужна ли вам дополнительная информация.