Один обработчик click для многих кнопок - как?

195
13 октября 2017, 16:33

Здравствуйте.

Есть страница на которой выводится результат поиска, php фрагмент скрипт, который формирует строки в таблице:

while ($row_result_material_name = mysqli_fetch_array($search_material_name)) {
                echo "<tr>";
                    echo "<td class='col-md-'>",$row_result_material_name['idPositionFK'],"</td>";
                    echo "<td>",$row_result_material_name['title'],"</td>";
                    echo "<td>",$row_result_material_name['price']," руб.</td>";
                    echo "<td>",$row_result_material_name['unit'],"</td>";
                    echo "<td> 
                               <button id='", $row_result_material_name['idMaterial'] ,"' data-id-material='", $row_result_material_name['idMaterial'] ,"' type='button' class='btn btn-success btn-md btn-wd' data-original-title='' title=''>
                                    <i class='material-icons'>add</i>
                               </button>
                          </td>";
                    echo "
                        <script>
                            $('#",$row_result_material_name['idMaterial'],"').click(function(){
                                var idMaterial_to_add =  $('#",$row_result_material_name['idMaterial'],"').data('id-material');
                                $.ajax({
                                                    url:        'server/express-order/express-add-to-plan.php',
                                                    type:       'POST',
                                                    cache:      false,
                                                    data:       {'idMaterial_to_add':idMaterial_to_add},
                                                    dataType:   'html',
                                                    success: function(data) {

                                                    }
                                });
                        </script>

                    ";  

                echo "</tr>";
    }

Результат вывода:

В силу своих скудных знаний js я костыльно прописываю каждой кнопке скрипт добавления, который выполняет добавление позиции в план (список\корзину назвать можно как угодно).

Прошу подсказать как лучше всего написать единственный обработчик на нажатие кнопок позиции в таблице.

Подозреваю, что это как то связано с магией this в js.

Спасибо!

Answer 1

Добавьте кнопкам специальный класс, и используйте этот класс для навешивания обработчика click. this внутри обработчика - нажатая кнопка.

<button ... class="btn btn-success btn-md btn-wd btn-add-material" ...>
  <i class='material-icons'>add</i>
</button>
$(".btn-add-material").click(function(e) {
  var idMaterial_to_add =  $(this).data('idMaterial');
  ...
});
Answer 2

Если кнопки будут перезагружаться через ajax, то лучше глобально навесить событие. В духе:

$(document).on('click', '.btn',function(e){
var idMaterial_to_add =  $(this).data('id-material');
...
});

Если же кнопки через ajax не подгружаются, то можно просто click

READ ALSO
Как вывести только 1 нужное значение?

Как вывести только 1 нужное значение?

Делаю парсер цен с сайтаУже задавал вопрос, мне подсказали

170
Шаблон массива не работает с float/double

Шаблон массива не работает с float/double

ЗдравствуйтеВот задание:

248
Синхронизация mutex [требует правки]

Синхронизация mutex [требует правки]

Нужно сделать синхронизацию с помощью мьютексов, но почему то пишет "индентификатор CloseHundle" не определен

211
Инспекция кода: генетический поиск

Инспекция кода: генетический поиск

Здравствуйте! Сейчас пытаюсь искать алгоритмы Маркова с помощью генетических алгоритмовЕсть такой вот код:

259