как делегировать mousedown и mouseup на динамически создаваемый div?

Question

rollmark создается динамически, поэтому мне нужно делегировать события на document

Попытка выполнить одно действие, пока нажата rollmark, и другое, когда мышь отпущена, но я получение синтаксической ошибки.

pls help.

$(document).on({'mousedown', '.rollmark' function(e){  
    console.log('down');
},
mouseup: function(){
    console.log('up');
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='rollmark'>CLICK</div>

Answer 1

Я думаю, вам нужно вызывать .on отдельно для каждого обработчика, если вы хотите делегировать события:

$(document)
  .on('mousedown', '.rollmark', function(e) {
    console.log('down');
  })
  .on('mouseup', '.rollmark', function() {
    console.log('up');
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='rollmark'>CLICK</div>

Answer 2

Вы можете сделать это так:

$(document).on('mousedown', '.rollmark', function(e) {  
  console.log('down');
}).on('mouseup', '.rollmark', function(e) {  
  console.log('up');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='rollmark'>CLICK</div>

Answer 3

вы пробовали ставить запятую после '.rollmark'?