WedX - журнал о программировании и компьютерных науках

Как предотвратить значение по умолчанию для динамически создаваемых якорей

У меня есть список задач с идентификатором #tasks с якорями удаления с классом .deleteTask рядом с каждым элементом списка. Эти элементы и ссылки на их удаление создаются динамически с помощью ajax. Поэтому, если я хочу подключить некоторые обработчики к элементам, я использую это следующим образом:

$('#tasks').on('click', '.deleteTask', function (event)
{
    if( ! confirm('Are you sure?') ) event.preventDefault();
});

Но кажется, что событие щелчка по привязкам с классом .deleteTask запускается до щелчка по родительскому элементу #tasks. Поэтому я не могу вызвать для него preventDefault(). Думаю, это из-за пузырей. Но как я могу вызвать preventDefault() для динамически создаваемых якорей?

Вот пример: https://jsfiddle.net/dyLa915b/1/

javascript jquery dynamically-generated preventdefault
18.09.2017

Ответы:


1

Есть три вещи, которые вы должны изменить.

1-й: вы используете один и тот же идентификатор для номеров идентификаторов tasks на одной странице, что неверно. Атрибут ID должен быть уникальным в одной модели DOM. Поэтому вы должны использовать класс вместо id. И тогда вы должны использовать этот класс в качестве селектора с jQuery.

2-й: Вы сказали, что эти элементы создаются динамически, поэтому они не известны DOM, потому что при первом отображении страницы их не было в DOM. Они были созданы после того, как DOM был готов. В таких случаях вы должны использовать делегирование событий jQuery.

3-й: напишите preventDefault в самой первой строке вашей функции jQuery.

Таким образом, окончательный обновленный код будет:

$(document).on('click', '.delete', function (event)
{
    event.preventDefault();
    if( ! confirm('Are you sure?') ) {
          // Write code if user clicks `ok` button of confirmbox.
    }
});
18.09.2017
  • Ваша ошибка обнаружена, когда я проверил ваш jsfiddle. Я заметил, что вы добавляете тег <a> с классом delete, когда вы определяете функцию jquery события click для класса deleteTask. Что неправильно. Поэтому, рассматривая class="delete" как реальное значение класса, я обновил свой код. Я также проверил это с помощью jsfiddle, и он работает в соответствии с вашими требованиями. 18.09.2017

    • 2

    Вы должны поставить event.preventDefault() перед вашей логикой. Вот пример: -

    var $links = $('.deleteTask');

$links.off('click').on('click', function($event){
  $event.preventDefault();
  $event.stopPropagation();
  
  if( ! confirm('Are you sure?') ){
  // do stuff  
  };
  
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <li>  
    <a class="deleteTask" href="www.google.com">Google</a>
  </li>
  <li>  
    <a class="deleteTask" href="www.youtube.com">Youtube</a>
  </li>
</div>

    18.09.2017

    3

    Для этого вы можете использовать делегата. delegate используется для динамических элементов. см. этот аналогичный пост.

    18.09.2017
  • В чем разница между on и делегатом? Это должно быть то же самое. Не так ли? 18.09.2017
    • Новые материалы
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    © 2024 wedx.ru, WedX - журнал о программировании и компьютерных науках
    Для любых предложений по сайту: [email protected]