How to operate on an element inside jquery-bootgrid formatters

Question

Suppose I have an bootgrid formatters like this:

$(document).ready(function () {
  //bootgrid
  $("#bootgrid-issues").bootgrid({
    ...

      formatters: {

       product: function (column, row){
         return "<p class='per_online_issue_id'>" + row.product["product_name"] +"</p>";
       },

      category: function (column, row){
        return "<p>" + row.category["category_name"] +"</p>";
      },
  },
});

And I want it to print an "hello" if the per_online_issue_id element clicked. But it doesn't work as expected. Have I missed something? Here is how I do this, I wrote it right after the formatters.

$('.per_online_issue_id').click(function () {
   console.log("hello")
});

Answer 1

Finally I myself figured out how to do this by returning javascript.

First: Return Javascript from the formatters of bootgrid.

product: function (column, row){
      return "<a href=\"javascript:void(0)\" onclick=my_function(\'"+row.product["product_name"]+"\'+ "</a>";
},

Second: Call the returned my_function to operate the element you want.

<script>
    function my_function(product_name) {
      alert("product_name returned from bootgrid: " + production_name);
    }
</script>