oncontextmenu not working when append rows in HTML table

Question

i am fetching 70 records from database and loading it in html table and when user scroll down from 1 to 70th record, on scroll event call and next 70 fetched e.g limit 70, 140 record fetched and append to already displayed records. so that i also using right click or oncontextmenu function in all rows by adding a class. when user right click in any data row of table on('contextmenu',function(){}); event called in first 70 records that fetched by default but not called on next 70 records which comes after scroll and appended with first 70 records. please help me to solve this why on contextmenu event not called up?? my code is.

//first 70 records comes as by default and display in table rows as

echo '<tr class="mute_ref_link_cls" id="' . $mm->msn . '_' . str_replace(array('_dup', '-dup'), '', $mm->name) . '_' . $mm->customer_id . '"  onClick="mute_ctrl_fn(' . $mm->customer_id . ');openSubDiv(' . $mm->cid . ',' . $mm->customer_id . ',\'' . $mm->f_id . '\',\'' . $mm->msn . '\',\'info\',\'' . str_replace(array('_dup', '-dup'), '', $mm->name) . '\');">';
echo '<td class="muteClr with-tip" id="' . $mm->customer_id . '" title="' . $res . '"><a style="color:red" onClick="">' . str_replace('-dup', '', str_replace('_dup', '', $mm->name)) . '</a></td>';
echo '<td>';
echo ($mm->session_date_time > 0) ? date('d-M-Y H:i', strtotime($mm->session_date_time)) : 'N/A';
echo '</td>';
echo '</tr>';

**After scroll next 70 records fetched and append at the end of 70th record as

echo '<tr class="mute_ref_link_cls" id="'.$mm->msn.'_'.str_replace(array('_dup','-dup'), '', $mm->name).'_'.$mm->customer_id.'"  onClick="mute_ctrl_fn('.$mm->customer_id.');openSubDiv('.$mm->cid.','.$mm->customer_id.',\''.$mm->f_id.'\',\''.$mm->msn.'\',\'info\',\''.str_replace(array('_dup','-dup'), '', $mm->name).'\');">';
        echo '<td class="muteClr with-tip" id="'.$mm->customer_id.'"  title="'.$res.'"><a style="color:red" onClick="">'.str_replace('-dup', '', str_replace('_dup', '', $mm->name)).'</a></td>';
        echo '<td>';
        echo ($mm->session_date_time>0)?date('d-M-Y H:i',  strtotime($mm->session_date_time)):'N/A';
        echo '</td>';
        echo '</tr>';

My jquery code when right click on any first 70 record:

$('.mute_ref_link_cls').on('contextMenu', function (event, list)
{
    $(this).trigger('click');
    var str = this.id;
    //getting msn and reference number as id on right click :: Ahmad Fraz
    var dtz = str.split("_");
    list.push({text: 'Add Reason', link: 'javascript:matchMMPinCodeForm(' + dtz[0] + ',' + dtz[1] + ',' + dtz[2] + ')', icon: 'blog'});
    list.push({text: 'Cancel', link: 'javascript:pending(' + dtz[0] + ',' + dtz[1] + ',' + dtz[2] + ',\'nf503698\')', icon: 'delete'});
});

Answer 1

Ideally you should use Event delegation for event binding on elements that get dynamically added to the DOM.

In your case it should be :

$('table').on('contextMenu', '.mute_ref_link_cls', function (event, list)
{
    $(this).trigger('click');
    var str = this.id;
    //getting msn and reference number as id on right click :: Ahmad Fraz
    var dtz = str.split("_");
    list.push({text: 'Add Reason', link: 'javascript:matchMMPinCodeForm(' + dtz[0] + ',' + dtz[1] + ',' + dtz[2] + ')', icon: 'blog'});
    list.push({text: 'Cancel', link: 'javascript:pending(' + dtz[0] + ',' + dtz[1] + ',' + dtz[2] + ',\'nf503698\')', icon: 'delete'});
});

As per the jQuery docs : http://api.jquery.com/on/

The 1st parameter is the event 2nd optional one is the selector 3rd optional one is the data for the handler And the last is the handler for the event.

Sorry for the typos / code-alignment as I'm replying from my handheld device.