Как я могу предотвратить двойное связывание на JavaScript?

0

Здесь моя ситуация, у меня есть таблица, которая может динамически добавлять/удалять строки, и мне нужно привязать строку удаления при загрузке страницы.

Вот мой код:

 <script type="text/javascript">
 $(document).ready(function(){ 
 $(".btnRemoveRow").bind("click", removeRow); });
 </script>

Но мне также нужно привязать еще один removeRow, когда я добавляю строки здесь на моем внешнем js

function addRow(){ 
{--add row code here--}
$(".btnRemoveRow").bind("click", removeRow); 
}

так что вновь добавленные строки будут также связываться с функцией removeRow,

вот моя функция removeRow:

function removeRow(){

var row = $(this).closest('tr');
var selected = row.find('input.qty,input.price,textarea,select').val();
$.getScript("calculate.js", function(){});

if(selected)
{
var r=confirm("Confirm Remove?");
if (r==true)
{

  row.find('input.qty,input.price,textarea,select').attr("disabled", true);
  row.find('input.hidden-deleted-id').val("yes");
  row.find('.subtotal>center>h3').text("0");
  calculate();

  row.hide();
  return false;
}
else
{
  return false;
} 
}

else{

  row.find('input.qty,input.price,textarea,select').attr("disabled", true);
  row.find('input.hidden-deleted-id').val("yes");
  row.find('.subtotal>center>h3').text("0");
  calculate();
  row.hide();
  return false; 
  }

  };

Случай 1: когда я удаляю строку без добавления строк сначала, она отлично работает (диалоговое окно появляется только один раз).

Случай 2: когда я сначала добавляю строку, а затем удаляю строки, которые уже были привязаны на странице, диалоговое окно появляется дважды.

Случай 3: когда я удаляю строки, которые я добавил, он отлично работает (диалог появляется один раз).

(PS: все еще изучающий JavaScript)

Любая идея, как я могу решить случай №2, пожалуйста?

  • 1
    Изучите использование event delegation
  • 0
    Там же off()
Теги:

2 ответа

3
Лучший ответ

Добавьте один обработчик событий, который делегирован, таким образом он будет работать для существующих элементов и будущих элементов

<script type="text/javascript">
 $(document).ready(function(){ 
     $(document).on("click", ".btnRemoveRow", removeRow); 
 });
</script>

замените document ближайшим нединамическим родительским элементом.

Поделиться
  • 0
    это было быстро.
  • 0
    Спасибо @amenadiel Это сработало! Я много дней сжимал свою голову из-за этой ошибки, хахаха, это было просто исправление! благодаря вам!
Показать ещё 2 комментария
1

Попробуй это:

<script type="text/javascript">
 $(function(){ 
   $(".btnRemoveRow").click(function(){removeRow();});
 });
 </script>
Поделиться
  • 0
    привет @hicurin !! Спасибо вам! Это также сработало!
  • 1
    Всегда добро пожаловать! @melvnberd. Мне нравится этот способ, потому что он действительно быстрый и понятный. Извините за мой английский, поэтому я пока не могу это объяснить: D.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню