いつどのテクニックを使うべきか、頭を悩ませようとしています。彼らはそれを単に「学習曲線」と呼んでいると思います。
次のように記述したときにクリック関数が機能するのはなぜですか。
$(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セレクターなのか、クリック機能自体なのかわかりません。これを理解する助けがあれば大歓迎です。そのようなコードを書くより良い方法はありますか?
私のスタイルは恐ろしいと感じているので、jsコードの書き方に関するアドバイスもいただければ幸いです。
前もって感謝します!