שלום לכולם

יש לי בעיה עם קוד jquery שכתבתי, הקוד עובד. אבל הבעיה היא כזאת:

בכל פעם שיש קליק בתוך ה#main-wrapper (שהוא בעצם כמעט כל הDOM), נידרש זיהוי האם ישנה תכונה של contenteditable.

אם יש (contenteditable == 'true'), פועלת פונקציה שמופעלת רק כאשר הפוקוס מורד מהאלמנט הנבחר, לוקחת את התוכן שלו ומציג אותו בלוג.

אז מה הבעיה?

שמסיבה שאינה ברורה לי, הפונקציה "סופרת" לי את מס' הקליקים ומציגה בהתאם הודעות ללוג. לדוגמה, בפעם הראשונה שאני לוחץ על <div> כל שהו (ולאחר מכן לוחץ מחוצה לו), אני מקבל הודעה אחת ללוג.

בפעם השניה אני מקבל 2 הודעות. אם אחרי זה נגיד אני לוחץ ברצף 5 פעמים, ואחר כך בחוץ אני אקבל 7 הודעות ללוג (2+5). וכן הלאה...

אני מעונין לקבל רק הודעה אחת בכל פעם שאני לוחץ מחוץ לאלמנט הנבחר.

עזרה מישהו???

$("#main-wrapper").click(function (e) {
  var contenteditable = $(e.target).attr('contenteditable');
  if (contenteditable == 'true') {
    $(e.target).focusout(function() {
      var content = $(this).html();
      console.log("get: " + content);
    });
  };      
});

אתה שוכח שה Event של ה FocusOut לא "נמחק" לאחר שהוא מתבצע. לכן כל פעם שאתה לוחץ על האלמנט את אוגר עוד ועוד אירועים.

הפתרון הוא לעשות unbind לאירוע כשהוא מסתיים (אחרי ה console.log).

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

המלצה שלי היא להיות פחות גנרי, כלומר: תן לכל ה - div שניתנים לעריכה - class="editable" ואז תיתן להם click event בצורה כזו:

$("#main-wrapper").on("click",".editable",function(){...}")

אתה יכול לראות פירוט של ON כאן.

אם אתה משתמש בגרסאות ישנות יותר תחליף את ON ב - delegate / live

אתה שוכח שה Event של ה FocusOut לא "נמחק" לאחר שהוא מתבצע. לכן כל פעם שאתה לוחץ על האלמנט את אוגר עוד ועוד אירועים.

הפתרון הוא לעשות unbind לאירוע כשהוא מסתיים (אחרי ה console.log).

תודה לכולם על העזרה!

מה שעשיתי בסוף זה שמתי את הunbind דווקא לפני הfocusout וזה עובד מעולה

ככה שכל פעם לפני שוהא לוקח את ההfocusoutהוא עושה הunbindלכל מה שהוא "זוכר" וככה אני מקבל רק אירוע אחד.