Добавлен 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
    добавлено
    Просмотры: 2
    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, источник