Добавлен html не глобально выбираемый в Javascript?

Я изо всех сил пытаюсь обвести голову тем, какие методы следует использовать, когда. Я думаю, они просто называют это «кривой обучения».

Почему функция click работает, когда написана следующим образом:

$(document).ready(function() {

    var Item = {
        list: function() {
            $.getJSON("output.php", function(data) {
                $.each(data, function(key, val) {

                    $("ul#list").append(
                        '
  • ' + '<div class="item">' + '<button name="plus" type="button" value="0" class="itemPlus">+</button>' + '<button name="minus" type="button" value="0" class="itemMinus">-</button>' + '</div>' + '
  • '
                        );
                    });
    
                    $("button").on("click", function() {
                        alert($(this).attr("name"));
                    });
                });
    
    
            }
        }
    
        Item.list();
    
    
    });
    

    и не работает таким образом: (Обратите внимание, что я переместил $ («кнопка») на ... вне объекта)

    $(document).ready(function() {
    
        var Item = {
            list: function() {
                $.getJSON("output.php", function(data) {
                    $.each(data, function(key, val) {
    
                       //HTML for Items. jQuery UI Templates?
                       //Select where list starts
                        $("ul#list").append(
                            '
  • ' + '<div class="item">' + '<div class="catLabel"><div class="catColor catColor' + val.category + '"></div></div>' + '

    ' + val.title + '

    ' + 'No Picture Yet' + '

    ' + val.desc + '

    ' + '
    ' + '

    1 Day Rental $' + val.price + '

    ' + '<button name="plus" type="button" value="0" class="itemPlus">+</button>' + '<button name="minus" type="button" value="0" class="itemMinus">-</button>' + '</div>' + '
  • '
                        );
                    });
    
    
                });
    
    
            }
        }
    
        Item.list();
    
        $("button").on("click", function() {
            alert($(this).attr("name"));
        });
    
    });
    

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

    Любые советы по стилям написания кода JS также будут оценены, потому что у меня есть чувство, что мое ужасно.

    Заранее спасибо!

    0
    nl ja de

    2 ответы

    $(document).on("click", "button", function() {
        alert($(this).attr("name"));
    });
    

    Вы добавили элементы Dynamicically. Они должны быть делегированы. Так, используйте выше, чтобы заставить его работать.

    1
    добавлено

    Попробуй вот так. Это необходимо, чтобы проинформировать контент.

    $("ul#list").on("click", "button", function() {
         alert($(this).attr("name"));
    });
    
    1
    добавлено
    Это простые вещи, которые делают мои волосы серыми. Спасибо за помощь Винс!
    добавлено автор Barry P, источник
    JavaScript Jobs — чат
    JavaScript Jobs — чат
    8 336 участник(ов)

    JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

    JavaScript.ru
    JavaScript.ru
    7 932 участник(ов)

    Сообщество сайта JavaScript.ru в Slack.

    pro.js
    pro.js
    4 675 участник(ов)

    Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

    Верстка сайтов HTML/CSS/JS/PHP
    Верстка сайтов HTML/CSS/JS/PHP
    3 439 участник(ов)

    Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

    JavaScript — русскоговорящее сообщество
    JavaScript — русскоговорящее сообщество
    3 269 участник(ов)

    Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

    JavaScript Noobs — сообщество новичков
    JavaScript Noobs — сообщество новичков
    2 484 участник(ов)

    Чат для новичков

    javascript_ru
    javascript_ru
    915 участник(ов)

    Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

    jsChat
    jsChat
    603 участник(ов)

    Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

    JavaScript for Zombies Chat
    JavaScript for Zombies Chat
    492 участник(ов)

    Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

    All That JS
    All That JS
    417 участник(ов)

    JS на русском