javascript — oncontextmenu не работает при добавлении строк в таблицу HTML

Я извлекаю 70 записей из базы данных и загружаю их в HTML-таблицу, и когда пользователь прокручивает страницу вниз с 1-й по 70-ю, при вызове события прокрутки и следующих 70 извлекается, например, предел 70, 140 Запись извлекается и добавляется к уже отображенным записям.
так что я также использую правую кнопку мыши или функцию oncontextmenu во всех строках, добавив класс.
когда пользователь щелкает правой кнопкой мыши в любой строке данных таблицы (‘contextmenu’, function () {}); событие вызывается в первых 70 записях, которые извлекаются по умолчанию, но не вызываются в следующих 70 записях, которые следуют после прокрутки и к которым добавляются первые 70 записей.
Пожалуйста, помогите мне решить это, почему по контекстному меню событие не вызывается ??
мой код

// первые 70 записей идут как по умолчанию и отображаются в строках таблицы как

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>';

** После прокрутки извлекаются следующие 70 записей и добавляются в конце 70-й записи как

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>';

Мой код JQuery при щелчке правой кнопкой мыши по любой первой 70 записи:

$('.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'});
});

0

Решение

В идеале вы должны использовать делегирование событий для привязки событий к элементам, которые динамически добавляются в DOM.

В вашем случае это должно быть:

$('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'});
});

Согласно документации JQuery: http://api.jquery.com/on/

1-й параметр — это событие
2-ой дополнительный — селектор
3-й необязательный — данные для обработчика
И последний — обработчик события.

Извините за опечатки / выравнивание кода, когда я отвечаю с моего портативного устройства.

2

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]