Предотвращение отправки формы по нажатию кнопки, созданной шрифтом, с вызовом функции - PullRequest
Новая
       20

Предотвращение отправки формы по нажатию кнопки, созданной шрифтом, с вызовом функции

0 голосов
/ 10 марта 2019

Я пытаюсь использовать jquery для удаления строки из таблицы при нажатии кнопки. Строка генерируется динамически, когда пользователь нажимает кнопку «+».

enter image description here

Прямо сейчас, когда кнопка нажата, форма отправляется. Я пытаюсь остановить это с возвращением ложного. (Не уверен, как реализовать предотвращение по умолчанию в onclick)

Я пробовал 2 куска кода. При использовании onlick = 'return false;' на тэге кнопки работает нормально. Когда я пытаюсь добавить к нему вызов функции, он продолжает отправлять форму, и я на этом сообразил.

Вариант 1, который не работает: 

$('#tbl').append(                              
   "<tr id='"+countCourses+"'>"+
   "<td><button onclick='return delete_row();' style='border: 0; background: none;'>"+                              
   "<i class='fa fa-minus-circle fa-lg' style='color:red' ></i></button></td>");

function delete_row(){
 alert('hello');
 return false;
};

Вариант 2 (также не работает): 

$('#tbl').append(                              
   "<tr id='"+countCourses+"'>"+
   "<td><button onclick='return delete_row(); return false;' style='border: 0; background: none;'>"+                              
   "<i class='fa fa-minus-circle fa-lg' style='color:red' ></i></button></td>");

function delete_row(){
 alert('hello');
};

Я также пытался вернуть false в обоих местах одновременно, но это тоже не работает. Что я делаю не так?

Последнее, что я пытался сделать, это также не останавливает отправку: 

"<td><button class='remove' style='border: 0; background: none;'>"

$(document).ready(function(){
  $('.remove').click(function(event){
    event.preventDefault();
    alert('test');
    // var num = $(this).attr('value');
    // console.log(num);
    // $("#"+num).remove(); 

    });
});

1 Ответ

1 голос
/ 11 марта 2019

Почему бы не использовать jQuery для этого: 

(function($, document){
  $(document).ready(function($){
      var countCourses = 'course-1'; //ids shouldn't start with a number (for testing)
      $('#tbl').append(  
         "<tr id='"+countCourses+"'>"+
         "<td>"+
         "<button name='submit_delete' style='border: 0; background: none;'>"+                              
         "<i class='fa fa-minus-circle fa-lg' style='color:red' ></i>"+
         "</button>"+
         "</td>"+
         "<td>Foobar</td>"+ //for testing
         "</tr>" //for testing
      );

      
      $('#tbl').on('click', 'button[name="submit_delete"]', function(e){
            //return; //-- simply return before the remove action on some condition
            $(this).closest('tr').remove(); //find the closest parent tr to the button and remove it
      });
    });
})(jQuery, document);
td{border:1px solid black;}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<table id="tbl" >


</table>

Я думаю, что вы упустили $(this).closest('tr') - в обработчике события this является целью события. Таким образом, мы можем просто найти следующую родительскую строку над этим в DOM и удалить ее.

event.preventDefault(); предотвратит действие по умолчанию независимо от того, что вы предотвращаете. Поскольку вы уже находитесь в обработчике событий, он не помешает запуску там вашего кода.

Если вы хотите, чтобы фактическая форма не отправлялась, и e.preventDefault(), и return false будут работать изнутри обработчика событий.

Но, в вашем примере: 

 $('.remove').click(function(event)

У вас есть класс remove, которого я не вижу на кнопке, но даже если бы он был там, вам нужно было бы использовать делегирование событий, потому что это динамически отображаемый элемент. Когда вы добавляете новую строку, есть большая вероятность, что ваше событие уже связано и не обнаружит эти новые элементы. Для этого вам нужно привязать к родительскому элементу, который присутствует в фактическом исходном коде. Затем вы делегируете это кнопке, как я сделал выше. Таким образом, он может собирать эти события и передавать их динамическим элементам.

Тем не менее, прошло много времени с тех пор, как я просматривал документы о том, как jQuery обрабатывает события, должно быть, это было как 1.6 или что-то в 2011 или около того, что могло измениться за "среднее" время ... лол ... но я знаю, что этот способ работает, так что я просто делаю это последние 8 лет или около того. Ну, когда бы они ни избавились от live, в любом случае.

Ура!

...