OnClick не отвечает

это мой первый вопрос по StackOverflox (и я очень нервничаю по этому поводу) Я провел выходные, пытаясь сделать AJAx, и у меня ничего не получилось ... Я следил за этим видео: https://thewikihow.com/video_eJHHIcScqYA и пытался следовать ему в своем коде. У меня это на мой взгляд и javascript: (простите за мой французский!):

$(document).ready(function(){
  $('#delete_beerlist').on("click", function(){
    $.ajax({
      url: '/beer_lists/' + this.parentElement.id,
      type: 'DELETE',
      succes: function(r){

      }
    });
  });
});

<h3> Pression </h3>

<% @draft_beers.each do |item| %>
  <tr id='<%= item.id%>'> 
    <td> <%= Beer.find(item.beer_id).name %> - </td> 
    <td> Prix pinte:  <%= item.pint_price %> - </td>
    <td> Prix demi: <%= item.half_pint_price %> - </td>
    <td> <%= link_to "modifier les prix", edit_beer_list_path(item.id) %> - </td> 
    <td id='delete_beerlist'>Supprimer</td> 
  </tr> </br>
<% end %>

<h3> Bouteille </h3>
<% @bottle_beers.each do |item| %>
  <tr id='<%=item.id%>'> 
    <td> <%= Beer.find(item.beer_id).name %> -</td>
    <td> Prix bouteille: <%= item.bottle_price %>  -</td>
    <td> <%= link_to "modifier le prix", edit_beer_list_path(item.id) %> </td> -
    <td id='delete_beerlist'>Supprimer</td> 
  </tr> </br>
<% end %>

И onClick ничего не дает в моей консоли. У меня есть драгоценный камень jquery-rails, и мне нужен jquery3 в моем application.js, это меня сильно сводит с ума>. < Спасибо за помощь!

Обновлено: это мой сгенерированный HTML-код

<!DOCTYPE html>
<html>
  <head>
    <title>Beerly</title>
    <meta name = "csrf-param" content = "authenticity_token" />
<meta name = "csrf-token" content = "B9vuLIENHSH2351ga9VW44ka6PFPLEP8Cu6zdMfgMZDZeuDKVWWrmafMTDAWdBmdRGfyLrpEStZ7xcUgOUjH5Q= = " />
    

    <link rel = "stylesheet" media = "all" href = "/assets/r-chrome.self-cc72d6b06fc2d60739fd45c645a0689aa61b37cf49950538dacaeb5a7ecc5d79.css?body=1" />
<link rel = "stylesheet" media = "all" href = "/assets/r-firefox.self-89fb2eca5e6840a84fbfd889939e747e6b41b2b590bcd6c2ac44f8ae5c48cd3e.css?body=1" />
<link rel = "stylesheet" media = "all" href = "/assets/bootstrap.min.self-43023147d9420f0da40facdf09ece46460a1ea2eee23a03ab10f3d16b895ea52.css?body=1" />
<link rel = "stylesheet" media = "all" href = "/assets/apropos.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel = "stylesheet" media = "all" href = "/assets/bars.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel = "stylesheet" media = "all" href = "/assets/beer_lists.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel = "stylesheet" media = "all" href = "/assets/beers.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel = "stylesheet" media = "all" href = "/assets/contact.self-af976636f1970c397e9281424f2a0e5f37bf97cd6ab2013e5c0cb44f3588c8c7.css?body=1" />
<link rel = "stylesheet" media = "all" href = "/assets/custom-bootstrap.self-7a5e46bedd72d2a3a75604d3c99e0355fdb7cb28935a7dac9c2d9bc73c8aca93.css?body=1" />
<link rel = "stylesheet" media = "all" href = "/assets/home.self-eb5ab899aa47638786ef95d408c673b47fff2391e7850978006620a39c79c532.css?body=1" />
<link rel = "stylesheet" media = "all" href = "/assets/hover.self-dd1c301d16e4556535c6986f12eaa121f5253bbbf59645fb836e2b0bcf2beb0f.css?body=1" />
<link rel = "stylesheet" media = "all" href = "/assets/map.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel = "stylesheet" media = "all" href = "/assets/mentionlegale.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" />
<link rel = "stylesheet" media = "all" href = "/assets/resultpage.self-6795a6e6f5532b292242295b7172cd1a59b9bb2ad4e6f16d4d5790e1bb0e4b8f.css?body=1" />
<link rel = "stylesheet" media = "all" href = "/assets/application.self-7dd66a9c9e781d6a4fbcc394eaae76758454669b87bd4cb570df5cdba9afb664.css?body=1" />
    <link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity = "sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin = "anonymous">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">

  </head>
   <header id = "shd">
<nav class = "navbar navbar-expand-lg navbar-light container pt-4 pb-4">
  <div class = "navbar-brand"><a href = "/"><img class = "logo" alt = "logo" src = "/assets/logo-68dee4b2513dbe544670d3e6e11b3dee11c0c5f78567b0baf41e4e87d7a2d11e.svg" /></a></div>
  <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarNav" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Toggle navigation">
    <span class = "navbar-toggler-icon"></span>
  </button>
  <div class = "collapse navbar-collapse" id = "navbarNav">

    <ul class = "navbar-nav ml-auto">
      <li class = "nav-item">
          <a class = "nav-link" href = "/">Accueil</a>        
      </li>
      <li class = "nav-item">
         <a class = "nav-link" href = "contact">Contact</a> 
      </li>
      <li class = "nav-item">
         <a class = "nav-link" href = "apropos">À propos</a> 
      </li>


      <li class = "nav-item">
      <a class = "nav-link" href = "/managers/bars/1/edit">Mon bar</a> 
      </li>       
      <li class = "nav-item">
      <a class = "nav-link" rel = "nofollow" data-method = "delete" href = "/managers/sign_out">Se déconnecter</a> 
      </li> 

      
    </ul>
  </div>
</nav>
<header>

 
   <body>
    <h2> Ma carte </h2>

<h3> Pression </h3>

  <tr id='3'> 
    <td> La Chouffe - </td> 
    <td> Prix pinte:  5.0 - </td>
    <td> Prix demi: 2.5 - </td>
    <td> <a href = "/beer_lists/3/edit">modifier les prix</a> - </td> 
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
  <tr id='5'> 
    <td> La Chouffe - </td> 
    <td> Prix pinte:  5.0 - </td>
    <td> Prix demi: 2.5 - </td>
    <td> <a href = "/beer_lists/5/edit">modifier les prix</a> - </td> 
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
  <tr id='7'> 
    <td> La Chouffe - </td> 
    <td> Prix pinte:  5.0 - </td>
    <td> Prix demi: 2.5 - </td>
    <td> <a href = "/beer_lists/7/edit">modifier les prix</a> - </td> 
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
  <tr id='13'> 
    <td> La Chouffe - </td> 
    <td> Prix pinte:  5.0 - </td>
    <td> Prix demi: 2.5 - </td>
    <td> <a href = "/beer_lists/13/edit">modifier les prix</a> - </td> 
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
  <tr id='15'> 
    <td> La Chouffe - </td> 
    <td> Prix pinte:  5.0 - </td>
    <td> Prix demi: 2.5 - </td>
    <td> <a href = "/beer_lists/15/edit">modifier les prix</a> - </td> 
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
  <tr id='19'> 
    <td> La Chouffe - </td> 
    <td> Prix pinte:  5.0 - </td>
    <td> Prix demi: 2.5 - </td>
    <td> <a href = "/beer_lists/19/edit">modifier les prix</a> - </td> 
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>

<h3> Bouteille </h3>
  <tr id='2'> 
    <td> La Chouffe -</td>
    <td> Prix bouteille: 7.0  -</td>
    <td> <a href = "/beer_lists/2/edit">modifier le prix</a> </td> -
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
  <tr id='4'> 
    <td> La Chouffe -</td>
    <td> Prix bouteille: 7.0  -</td>
    <td> <a href = "/beer_lists/4/edit">modifier le prix</a> </td> -
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
  <tr id='6'> 
    <td> La Chouffe -</td>
    <td> Prix bouteille: 7.0  -</td>
    <td> <a href = "/beer_lists/6/edit">modifier le prix</a> </td> -
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
  <tr id='8'> 
    <td> La Chouffe -</td>
    <td> Prix bouteille: 7.0  -</td>
    <td> <a href = "/beer_lists/8/edit">modifier le prix</a> </td> -
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
  <tr id='10'> 
    <td> La Chouffe -</td>
    <td> Prix bouteille: 7.0  -</td>
    <td> <a href = "/beer_lists/10/edit">modifier le prix</a> </td> -
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
  <tr id='12'> 
    <td> La Chouffe -</td>
    <td> Prix bouteille: 7.0  -</td>
    <td> <a href = "/beer_lists/12/edit">modifier le prix</a> </td> -
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
  <tr id='14'> 
    <td> La Chouffe -</td>
    <td> Prix bouteille: 7.0  -</td>
    <td> <a href = "/beer_lists/14/edit">modifier le prix</a> </td> -
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
  <tr id='16'> 
    <td> La Chouffe -</td>
    <td> Prix bouteille: 7.0  -</td>
    <td> <a href = "/beer_lists/16/edit">modifier le prix</a> </td> -
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
  <tr id='18'> 
    <td> La Chouffe -</td>
    <td> Prix bouteille: 7.0  -</td>
    <td> <a href = "/beer_lists/18/edit">modifier le prix</a> </td> -
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
  <tr id='20'> 
    <td> La Chouffe -</td>
    <td> Prix bouteille: 7.0  -</td>
    <td> <a href = "/beer_lists/20/edit">modifier le prix</a> </td> -
    <td class='delete_beerlist'>Supprimer</td> 
  </tr> </br>
 

<h1>Cherche ta bière </h1>

<form action = "/managers/beer_lists" accept-charset = "UTF-8" method = "get"><input name = "utf8" type = "hidden" value = "&#x2713;" />
  <input type = "text" name = "term" id = "term" />
  <input type = "submit" value = "Search" data-disable-with = "Search" />
</form></br>
</br>



    <!-- Footer -->
<footer class = "page-footer font-small sticky-bottom pt-5 pb-5 mt-6">

  <div class = "container">

    <!-- Footer Links -->
    <div class = "container-fluid text-center text-md-left">

      <!-- Grid row -->
      <div class = "row">

        <!-- Grid column -->
        <div class = "col-md-6 mt-md-0 mt-3 text-dark">

          <!-- Content -->
          
          <div class = "navbar-brand"><a href = "/"><img class = "logo-footer" alt = "logo" src = "/assets/logo-68dee4b2513dbe544670d3e6e11b3dee11c0c5f78567b0baf41e4e87d7a2d11e.svg" /></a></div>

        </div>
        <!-- Grid column -->

        <hr class = "clearfix w-100 d-md-none pb-3">

        <!-- Grid column -->
        <div class = "col-md-3 mb-md-0 mb-3">

            <!-- Links -->
            <h5 class = "text-uppercase text-dark">Links</h5>

            <ul class = "list-unstyled text-dark">
              <li>
                <a href = "#!" class = "nav-item">Link 1</a>
              </li>
              <li>
                <a href = "#!" class = "nav-item">Link 2</a>
              </li>
              <li>
                <a href = "#!" class = "nav-item">Link 3</a>
              </li>
              <li>
                <a href = "#!" class = "nav-item">Link 4</a>
              </li>
            </ul>

          </div>
          <!-- Grid column -->

          <!-- Grid column -->
          <div class = "col-md-3 mb-md-0 mb-3 text-dark">

            <!-- Links -->
            <h5 class = "text-uppercase">Links</h5>

            <ul class = "list-unstyled">
              <li>
                  <a class = "nav-item" href = "/">Accueil</a>  
              </li>
              <li>
                <a class = "nav-item" href = "contact">Contact</a> 
              </li>
              <li>
                  <a class = "nav-item" href = "apropos">À propos</a> 
              </li>
              <li>
                <a class = "nav-item" href = "mentions-legales">Mentions Légales</a> 
              </li>
            </ul>

          </div>
          <!-- Grid column -->

      </div>
      <!-- Grid row -->

    </div>
    <!-- Footer Links -->

  
    <!-- Copyright -->
  </div>
  </footer> 
    <script src = "/assets/popper.min.self-71f355c150b0a532df467fea2bf02ec471bcfe1c86463c9a71a32f5fe94c3007.js?body=1"></script>
<script src = "/assets/bootstrap.min.self-a8e68c223de43929594bd637b85532a803195ce936a435f51c444e697dac8d1f.js?body=1"></script>
<script src = "/assets/rails-ujs.self-d109d8c5c0194c8ad60b8838b2661c5596b5c955987f7cd4045eb2fb90ca5343.js?body=1"></script>
<script src = "/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1"></script>
<script src = "/assets/jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1"></script>
<script src = "/assets/beer_lists.self-eac9e7c016b6d45c447b1b13a02c83b6657ec16316db179d1c59593c227112b3.js?body=1"></script>
<script src = "/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1"></script>
<script src = "/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1"></script>
<script src = "/assets/application.self-6a7f81c89608537f1c0b5e6e1a1cad14caec515ae09b88e0406efa9bcbfd4752.js?body=1"></script>
  </body>
</html>

delete_beerlist должен быть классом, а не идентификатором, поскольку идентификаторы должны быть уникальными.

— 09.12.2018 23:35

Спасибо! Я пробовал несколько вещей, изначально это был класс, я просто изменил его обратно, не изменил своей проблемы.

— 09.12.2018 23:40

Привет, этот код, похоже, ничего не выводит на консоль. Что вы ожидаете увидеть в консоли?

— 09.12.2018 23:40

@bugfroggy Ой, я неправильно задала свой вопрос ^^ "Я просто хочу удалить соответствующий элемент, но я заметил, что мой метод onClick не отвечает на моей консоли (если я помещу console.info сразу после:` ` `$ ('# delete_beerlist'). on (" click ", function () {` `, ничего не появляется

— 09.12.2018 23:49

пожалуйста, опубликуйте сгенерированный html-код.

— 10.12.2018 01:04

@Juliette Вы добавляете кнопку на страницу после того, как документ будет готов? Наиболее вероятный сценарий, который я могу обнаружить, это то, что вы регистрируете прослушиватель событий, а затем добавляете кнопку. Сначала необходимо добавить кнопку, а затем зарегистрировать прослушиватель событий.

— 10.12.2018 03:56

@ robere2 Я создаю кнопку с расширением .each, значит ли это, что она добавлена после того, как документ готов?

— 10.12.2018 10:13

@Juliette Может. Трудно сказать, не увидев весь код. Если вы отредактируете эту часть в своем вопросе, я, возможно, смогу предоставить дополнительную информацию.

— 10.12.2018 16:13

javascript jquery html ajax

09.12.2018 23:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Другие вопросы по теме

JQuery проверяет значение поля ввода и использует, если 1 или больше

Отложенное исключение JQuery: повторение параметра не допускается

Как вернуть отсоединенный элемент?

Как выбрать элемент в jQuery по параметру id функции?

Как проверить, имеет ли div тот же текст, что и другой div в jQuery

Анимировать только div нажатой кнопки

Проблемы с загрузкой HTML-шаблона при нажатии на Flask и Jinja2

Стационарный нижний колонтитул Javascript охватывает фокус

Как отфильтровать таблицу с помощью JQuery?

Инициализация JQuery для серверной DOM

OnClick не отвечает

Другие вопросы по теме

Похожие вопросы