Отправить событие в другую функцию - PullRequest
Новая
       15

Отправить событие в другую функцию

0 голосов
/ 02 апреля 2019

Проблема

Есть ли способ отправить 'событие' в другую функцию с помощью jQuery?У меня есть этот код, чтобы предотвратить удаление строки из моей таблицы для выполнения определенных обработок, а затем удалить строку.Я хочу добавить модальное окно между.Но я не знаю, как поступить.

На самом деле, мне это нравится 

$('#delete-row').on('click', '.tr-special .remove-line-exceptionnel', function (event) {
    event.preventDefault();
    var $row = $(event.target).closest('.tr-special');
    console.log($row);
    var elementSortable = $row.find('ul').attr('id');
    items = $row.find('li');
    $( items ).each(function( index ) {
      //function out of purpose     
    });
    $row.remove();
});

Вывод console.log: 

r.fn.init [tr.tr-special, prevObject: r.fn.init(1)]

Я хочу позвонить своемумодальный, после нажатия на кнопку «Удалить» с классом .remove-line, поэтому в обычное время я делаю это так$ ('# delete-row'). on ('click', '.tr-special .remove-line', функция (событие) {.. execute. 

$('.modal-footer').on('click', '.validDelete', function(e) {
    var $row = $(e.target).closest('.tr-special');
    console.log($row);

});

Вывод на консоль.лог 

r.fn.init [prevObject: r.fn.init(1)]

надеюсь вы меня поняли

1 Ответ

0 голосов
/ 02 апреля 2019

Если вы просто объявляете переменную $row глобально ...

В обработчике кликов .remove-line-exceptionnel сохраните элемент для возможного удаления. Затем в обработчике кликов .validDelete элемент удаляется.

То есть не отправляет событие куда-либо. Есть два события ... Одно, чтобы знать, какой элемент удалить, и другое, чтобы фактически сделать это. 

// Declare a variable globally
var $row;

// Button (or whatever) in the row
$('#delete-row').on('click', '.tr-special .remove-line-exceptionnel', function (event) {
  // Store the row element to delete
  $row = $(event.target).closest('.tr-special');
  // Show modal
  $('#custom-width-modal').modal('show');
});

// Modal button
$('.modal-footer').on('click', '.validDelete', function(e) {
  // Remove the row
  $row.remove();
  // Hide modal
  $('#custom-width-modal').modal('hide');
});
table{
  margin: 0 auto;
}
td{
  padding: 1em;
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table id="delete-row">
  <tr class="tr-special">
    <td>Row 1</td>
    <td><button class="remove-line-exceptionnel">Remove</button></td>
  </tr>
  <tr class="tr-special">
    <td>Row 2</td>
    <td><button class="remove-line-exceptionnel">Remove</button></td>
  </tr>
  <tr class="tr-special">
    <td>Row 3</td>
    <td><button class="remove-line-exceptionnel">Remove</button></td>
  </tr>
</table>

<div id="custom-width-modal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Are you sure?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary validDelete">Yes, I'm sure.</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
...