0

我正在努力思考什么时候应该使用什么技术。我猜他们只是称之为“学习曲线”。

为什么 click 函数在这样写时起作用：

$(document).ready(function () {

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

                    $("ul#list").append(
                        '<li id="id' + val.id + '" class="itemContainer item' + val.category + '">' +
                        '<div class="item">' +
                            '<button name="plus" type="button" value="0" class="itemPlus">+</button>' +
                            '<button name="minus" type="button" value="0" class="itemMinus">-</button>' +
                        '</div>' +
                        '</li>'
                    );
                });

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


        }
    }

    Item.list();


});

并且不能以这种方式工作：（注意我将 $("button").on... 移到了对象之外）

$(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(
                        '<li id="id' + val.id + '" class="itemContainer item' + val.category + '">' +
                        '<div class="item">' +
                            '<div class="catLabel"><div class="catColor catColor' + val.category + '"></div></div>' +
                            '<h2 class="itemTitle">' + val.title + '</h2>' +
                            '<img class="itemPic" src="img/noPic.gif" alt="No Picture Yet">' +
                            '<p class="itemDesc">' + val.desc + '</p>' +
                            '<hr/>' +
                            '<p class="itemDayPrice"><span class="itemDays">1</span> <a href="#">Day</a> Rental <sup>$</sup><span class="itemPrice">' + val.price + '</span></p>' +
                            '<button name="plus" type="button" value="0" class="itemPlus">+</button>' +
                            '<button name="minus" type="button" value="0" class="itemMinus">-</button>' +
                        '</div>' +
                        '</li>'
                    );
                });


            });


        }
    }

    Item.list();

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

});

我不知道它是需要在里面的 jQuery 选择器，还是 click 函数本身。任何帮助理解这一点将不胜感激。有没有更好的方法我应该编写这样的代码？

任何关于 js 代码编写风格的建议也将不胜感激，因为我觉得我的感觉很糟糕。

提前致谢！

4

2 回答 2

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

您已动态添加元素。他们应该被委派。所以，使用上面的东西来使它工作。

于 2013-01-09T11:59:21.093 回答
1

像这样试试。这是一个需要委托的注入内容。

$("ul#list").on("click", "button", function() {
     alert($(this).attr("name"));
});
于 2013-01-09T12:03:28.177 回答