在重新加载部分导轨时混淆范围

Question

我正在构建一个具有任务优先级的简单待办事项，我希望用户能够通过单击表中的优先级单元格来编辑任务优先级，该单元格会弹出一个 div，他们可以在其中选择一个新的优先级，然后通过ajax发送到后端。

目前它工作正常，但只是第一次，一旦我重新加载任务表部分，它就完全坏了，我相信我有一个范围问题，因为它仍然检测到对正文的点击，但没有检测到重新加载的部分中的任何元素但我想不通。

var priorityUpdater;

priorityUpdater = function() {
  var pCells = document.getElementsByClassName('priority-cell');

  $('.task-table')[0].onscroll = function () {
    if ($('.priority-changer')[0]) {
      $('.priority-changer')[0].remove();
    }
  }

  document.body.onclick = function () {
    if ($('.priority-changer')[0]) {
      $('.priority-changer')[0].remove();
    }
  }

  for (var i=0; i < pCells.length; i++) {
    pCells[i].onclick = function (e) {
      if (!$('.priority-changer')[0]) {
        var div = document.createElement('div');
        var currentPriority = this.getElementsByClassName('red').length
        var taskId = this.id
        div.className = 'priority-changer';
        div.style.top = (this.getBoundingClientRect()['top'] + 2) + 'px';
        div.style.left = (this.getBoundingClientRect()['left'] + 20) + 'px';
        div.innerHTML = 
        '<label for="'+'task-'+taskId+'">Priority</label>' +
        '<select name="priority" id="'+'task-'+taskId+'">' +
          '<option value="1"'+ ((currentPriority === 1) ? 'selected' : '') + '>1</option>' +
          '<option value="2"'+ ((currentPriority === 2) ? 'selected' : '') + '>2</option>' +
          '<option value="3"'+ ((currentPriority === 3) ? 'selected' : '') + '>3</option>' +
          '<option value="4"'+ ((currentPriority === 4) ? 'selected' : '') + '>4</option>' +
          '<option value="5"'+ ((currentPriority === 5) ? 'selected' : '') + '>5</option>' +
        '</select>';
        e.target.appendChild(div);
        e.stopPropagation();

        $('.priority-changer')[0].onclick = function (e) {
          e.stopPropagation();
        };

        $('#task-'+taskId).change( function() {
          $.ajax({url:'/tasks', type: 'PATCH', data:{task: {id: taskId, priority: $(this).val()}}});
        });
      };
    };
  };
};

$(window).load(function() {
  return priorityUpdater();
});

Answer 1

我的问题与 turbolinks 相关，并通过委托Why would this JS fire on a form partial rendered on 1 page but not another? 中所见的点击操作解决了