שאילתת Jquery לא מגיבה

yyy

נתון הקוד הבא:

<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>

בפועל השלב הראשון שתיארתי עובד מצויין ואכן מודפסים הלחצנים. בשלב השני משום מה הדפדפן מתעלם מהקריאה לסלקטור הנ"ל וכלל לא נכנס לפונקציה.
מהו ההסבר לכך?
תודה רבה.

OdedDvir

@yyy אני לא מנוסה ב-JQuery, אבל אנסה בכל זאת...
הוצאת את הקוד של פונקצית האירוע מלולאת ה for, כשלכאורה אתה צריך להצמיד אותו לכל לחצן. משהו כזה אולי:

for (i = 0; i < num; i++) {
    $("#myOutput").append($("#myBtn").html());
    $("#myOutput #main").text(" לחצן " + (i + 1));
    $("#myOutput #main").attr("id", "l" + (i + 1));
    $("#l" + (i+1)).click(function() {//foo2
         alert("in button under #myOutput")
      }
}

yossiz

@yyy כמו ש@OdedDvir התכוון להעיר, אתה מנסה לאגד event handler לאלמנטים בשעה שעוד לא נוצרו.

אפשר לעשות את הפעולה בתוך לולאת ה-for כמו ש-@OdedDvir כתב, או יותר אלגנטי ( ) אחרי הלולאה אבל בתוך ‎$("#myBtn").click כאשר האלמנטים כבר קיימים :

$(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")
    });
  });
});

OdedDvir

@yossiz אמר בשאילתת Jquery לא מגיבה:

כמו ש@OdedDvir התכוון להעיר, אתה מנסה לאגד event handler לאלמנטים בשעה שעוד לא נוצרו.

האמת שבכלל לא התכוונתי לזה...
אני הבנתי מהקוד שלו שהאלמנטים כבר נוצרו, אבל שהבעיה הייתה בסלקטור... אני כעת משער שאפשר להשתמש בסלקטור גלובלי עבור כל הלחצנים, כפי שכתבת.
אבל כעת אני לא מבין מה ההבדל בין הקוד שלו לשלך...

או יותר אלגנטי

yossiz

@odeddvir אמר בשאילתת Jquery לא מגיבה:

אני כעת משער שאפשר להשתמש בסלקטור גלובלי עבור כל הלחצנים, כפי שכתבת.

כן. כך היא צורת העבודה ב-Jquery. אם הסלקטור מתאים לכמה אלמנטים - הפעולות המשורשרות חלות על כל האלמנטים.

אבל כעת אני לא מבין מה ההבדל בין הקוד שלו לשלך...

פירמטתי אותו קצת שיהיה יותר ברור.

WWW

@odeddvir אמר בשאילתת Jquery לא מגיבה:

אבל כעת אני לא מבין מה ההבדל בין הקוד שלו לשלך...

אצל @yyy הלחצנים נוצרים רק לאחר אירוע לחיצה על אלמנט #myBtn, והקוד שמאגד ללחצנים פונקציה, רץ מיד כשהמסמך מוכן...

yyy

לאחר כל הנ"ל האם יש דרך לגרום לשאילתת JQ לרוץ גם על אלמנטים שיווצרו בעתיד?

dovid

היה פעם live אבל הוא יצא משימוש, במקומו משתמשים בon על אלמנט קיים ומציינים בארגומנט השני את הסלקטור של האלמנט העתידי:

$(document).on('click', 'button', function() { alert($(this).text() + ' clicked!') });

היום jQuery נחשב מיושן מעט, וקל מאוד גם בלעדיו לעשות את רוב הדברים.
פה למשל, קל להצמיד אירוע תוך יצירת האלמנט וזה מייתר את השאלה.

yyy

@dovid אמר בשאילתת Jquery לא מגיבה:

היה פעם live אבל הוא יצא משימוש, במקומו משתמשים בon על אלמנט קיים ומציינים בארגומנט השני את הסלקטור של האלמנט העתידי:
$(document).on('click', 'button', function() { alert($(this).text() + ' clicked!') });
היום jQuery נחשב מיושן מעט, וקל מאוד גם בלעדיו לעשות את רוב הדברים.
פה למשל, קל להצמיד אירוע תוך יצירת האלמנט וזה מייתר את השאלה.

סייעת לי רבות, איש יקר.