Как сделать $ (this) селектор запускает несколько классов

Question

У меня есть 2 таблицы с разными классами, которые имеют одинаковое содержание.Таблица 1 показана в главном разделе, а вторая таблица - во всплывающей функции.Обе таблицы все еще находятся на одной странице html.

У меня есть функция щелчка, использующая 2 селектора классов , которая, я надеюсь, может запускать обе таблицы одним щелчком мыши и изменять обе таблицы.Но функция щелчка работает только в одной таблице, а не в обеих таблицах.

Обратите внимание, что вторая таблица создается динамически и не всегда существует.

Как сделать так, чтобы обе таблицы запускались при каждом нажатии иошибка не возвращается, если второй таблицы не существует.

Мой код:

$('.table1 a.name, .table2 a.name').click(function(c){
	c.preventDefault();
	var $item = $(this);	
	var checked = $('<img class="checked" src="https://findicons.com/files/icons/1964/colorcons_green/128/checkmark.png" width="30" height="30">');
  //$.post("", {data:datas},function(data){
    // some ajax result
    $($item).before(checked);
    $('img.checked').not(checked).remove();
  //});
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Table 1</h2>

<table class="table1">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><a class="name" href="https://stackoverflow.com">Alfreds Futterkiste</a></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><a class="name" href="https://stackoverflow.com/2">Centro comercial Moctezuma</a></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><a class="name" href="https://stackoverflow.com/3">Ernst Handel</a></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

<br>

<h2>Table 2</h2>

<table class="table2">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><a class="name" href="https://stackoverflow.com">Alfreds Futterkiste</a></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><a class="name" href="https://stackoverflow.com/2">Centro comercial Moctezuma</a></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><a class="name" href="https://stackoverflow.com/3">Ernst Handel</a></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

Answer 1

Я нашел обходной путь для этого поста.

Проблема в том, что jQuery функция this Функция щелчка относится только к элементу, по которому щелкнули.Он никогда не рассчитывается на другие элементы, которые объявлены как селекторы, даже если они имеют идентичное содержимое.

Так что решение, если у вас одинаковое содержимое в нескольких элементах, заключается в использовании функции filter для поиска одинаковых значений, а затем выможет поставить их всех под единое целое.

В моем случае мне просто нужно пометить одинаковые значения a href во всех элементах.

Обновленный фрагмент

$('.table1 a.name, .table2 a.name').click(function(c){
	c.preventDefault();
	var $item = $(this).attr('href');	
	var checked = $('<img class="checked" src="https://findicons.com/files/icons/1964/colorcons_green/128/checkmark.png" width="30" height="30">');
  //$.post("", {data:datas},function(data){
    // some ajax result
    //$($item).before(checked);
    
    var marked =  $('.table1 a.name, .table2 a.name').filter(function() {
       $('img.checked').not(marked).remove();
        return $(this).attr('href') ===  $item;
    }).before(checked);   
    
    
  //});
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Table 1</h2>

<table class="table1">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><a class="name" href="https://stackoverflow.com">Alfreds Futterkiste</a></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><a class="name" href="https://stackoverflow.com/2">Centro comercial Moctezuma</a></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><a class="name" href="https://stackoverflow.com/3">Ernst Handel</a></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

<h2>Table 2</h2>

<table class="table2">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><a class="name" href="https://stackoverflow.com">Alfreds Futterkiste</a></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><a class="name" href="https://stackoverflow.com/2">Centro comercial Moctezuma</a></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><a class="name" href="https://stackoverflow.com/3">Ernst Handel</a></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>

Answer 2

С этого Привязка события к динамически создаваемым элементам?

on функция в jQuery может напрямую прикреплять событие к уже созданным элементам.

Например, вы можете использовать следующий код для динамически создаваемого table2 -

$('body').on('click', '.table2 a.name', function (event){
//Code here
});

Когда есть щелчок по body, проверьте, является ли цель .table2 a.name, если да, выполните функцию.