0

Is there any way to user mousedown event on dynamically added elements 

$(function() {
  var isMouseDown = false,
    isHighlighted;
  //$('#our_table').on('mousedown', 'tr', function (event) {
  $("#myTable tr").mousedown(function() {
    isMouseDown = true;
    $(this).toggleClass("highlighted");
    isHighlighted = $(this).hasClass("highlighted");
    return false; // prevent text selection
  }).mouseover(function() {
    if (isMouseDown) {
      $(this).toggleClass("highlighted", isHighlighted);
    }
  }).bind("selectstart", function() {
    return false;
  })
  $(document).mouseup(function() {
    isMouseDown = false;
  });
});

function addRow() {
  var arrTables = document.getElementById('myTable');
  var oRows = arrTables.rows;
  var numRows = oRows.length;

  var newRow = document.getElementById('myTable').insertRow(numRows);
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);

  cell1.innerHTML = numRows;
  cell2.innerHTML = numRows;
  cell3.innerHTML = numRows;
}
table td {
  width: 100px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  background-color: #ccc;
  border: 1px solid #fff;
}

table tr.highlighted td {
  background-color: #999;
}

body {
  user-select: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" id="myTable">
  <tr>
    <td>0</td>
    <td>0</td>
    <td>0</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
  </tr>
</table>
<button onclick="addRow()">Add Row</button>
justDan
  • 2,302
  • 5
  • 20
  • 29
Abhi
  • 11
  • 2
  • Use the $('document').on('mousedown','.class_info',function(){. Your dynamic content even loaded isnt part of the dom. – Cam Nov 07 '19 at 16:50
  • It's always better to add the code required in the question. But I can see your fault - you need to use 'delegated' watchers on your elements. Not a `mousedown`. You commented-out the correct method above your mousedown function handler – Glycerine Nov 07 '19 at 16:51
  • Thanks Cam, If you open that link - http://jsfiddle.net/AbhiThakare/vqbnkfhL/ I have trie that as well. – Abhi Nov 07 '19 at 16:52
  • @Glycerine, even if I use .on methond (commented code) still it is not wokring, some how $(this) refers to wrong elements and heance row is not selected. – Abhi Nov 07 '19 at 16:55
  • It works fine when you use `on()` correctly: http://jsfiddle.net/xarwj7c1/ – Rory McCrossan Nov 07 '19 at 16:59
  • Thanks Rory, but if I use ```on()``` my rows are not selected on mouse drag. – Abhi Nov 07 '19 at 17:01
  • In which case see @n1kkou's answer below – Rory McCrossan Nov 07 '19 at 17:03

1 Answers1

1

You have to set the event delegation to body element and then match the event.target to the element you want to trigger your action.

You can check this start, updated your fiddle only for the mousedown method: http://jsfiddle.net/Len7csa0/

n1kkou
  • 3,096
  • 2
  • 21
  • 32