How to turn off jQuery click event

Question

I have a table and the TDs have a class and based on that class I'm adding click events to it like this

$('#regRegionsTable').on('click', '.toggleDetail', toggleDetail);

I'm using on because the table appears, goes away, and returns, and so on, so I need to be able to add events to the table as it gets added to the DOM. In certain circumstances I need to disable the events for a specific row. I'm trying it like this, but it's not working.

$(row).off('click', '.toggleDetail');

row is the TR DOM node. So I'm trying to get all of the TDs in the row that have the toggleDetail class and turn off the click event binding.

Answer 1

This is an example that could be useful. I add the click event on each td. On certain circumstances (clicking on a button in my example) I disable the click event for all the td on a specific row (the first row) using unbind()

 $('#regRegionsTable td.toggleDetail').on('click', toggleDetails); function toggleDetails(){ console.log("click avvenuto") } $("button").on("click",function(){ $('#regRegionsTable tr:first-of-type td.toggleDetail').unbind('click', toggleDetails); }) function toggleDetails(){ console.log("click avvenuto") }

 <table id="regRegionsTable" border="1"> <tr> <td class="toggleDetail">1</td> <td class="toggleDetail">2</td> <td class="toggleDetail">3</td> </tr> <tr> <td class="toggleDetail">4</td> <td class="toggleDetail">5</td> <td class="toggleDetail">6</td> </tr> </table> <button>Remove event on a specific tr</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>