נתון הקוד הבא:
<script>
$(document).ready(function() {
$("#myBtn").click(function() {//foo1
var num = $("#myInput input").val();
for (i = 0; i < num; i++) {
$("#myOutput").append($("#myBtn").html());
$("#myOutput #main").text(" לחצן " + (i + 1));
$("#myOutput #main").attr("id", "l" + (i + 1));
}
});
$("#myOutput button").click(function() {//foo2
alert("in button under #myOutput")
});
});
</script>
<body>
<div id="myInput">
<input type="text">
</div>
<div id="myBtn">
<button id="main">לחץ כאן</button>
</div>
<div id="myOutput">
</div>
</body>
מה שהקוד מבצע, הוא קבלת קלט מספרי בשדה הקלט, והדפסת לחצני מספרים אשר מספרם זהה לערך שנקלט. (מסומן כ-foo1).
השלב הבא אמור להיות שבלחיצה על אחד מהלחצנים, תקפוץ הודעת ()alert. (מסומן כ-foo2) דבר זה אמור להתבצע על ידי הסלקטור
"#myOutput button"
שכן הקוד נראה בשלב זה בצורה הבאה:
<div id="myOutput">
<button id="l5"> לחצן 5</button>
...
...
<button id="l1"> לחצן 1</button>
</div>
בפועל השלב הראשון שתיארתי עובד מצויין ואכן מודפסים הלחצנים. בשלב השני משום מה הדפדפן מתעלם מהקריאה לסלקטור הנ"ל וכלל לא נכנס לפונקציה.
מהו ההסבר לכך?
תודה רבה.