+ 18

[SOLVED] Problem with event listener

Hay friends the problem is with following code https://code.sololearn.com/WreZixWXD3GL Aactuly whenever the document is loaded the delete button of notes shows console correctly but when I add some new notes to it the event listner dosen't response me for second time. I know question is bit unclear. Simple see the last jquery event listener. $('div.small_delete').on('click', function(){ var del_idx = $(this).parent().parent().index(); console.log(del_idx); }); It works for the first time when the document is loaded but after that when I add some notes using add button of top right corner it dosen't work anymore. 鈿狅笍 Sololearn doesn't support localStorage so dont try this app here paste it in any of the code editor and run it you will get my doubt.

15th Jul 2021, 2:54 AM
涓光摠銊┶╁痪
涓光摠銊┶╁痪 - avatar
10 Answers
+ 5
涓光摠銊┶╁痪 as soon as you add a note (or a to_do), you rewrite completly the html of all notes and to_dos... so the event listener you define at onload event no more work, because the references on wich it applies no more exist ^^ you should redefine the event listener(s) attached to code updated... at end of 'showdata' function ;P alternatively, you could handle the new note/to_do differently, by only inserting the new note (without deleting the existent html) and define only on it the event listener(s) required ^^ but that mean you must probably use other functions than jquery 'html'... to insert html element rather than html code. I do not use jquery, so I can't give you the right way in jquery, but I know how to do so with vanilla javascript ;) anyway, updating html code is less efficient and more error prone than updating the dom tree...
15th Jul 2021, 5:17 AM
visph
visph - avatar
+ 4
visph its still not working in sl but it works fine in web 馃憣
15th Jul 2021, 5:57 AM
Queen 馃挏
Queen 馃挏 - avatar
+ 3
That's the reason my all even crashes I sl I will surely try fixing your app Just few mins https://code.sololearn.com/WA189A6a170A/?ref=app
15th Jul 2021, 4:23 AM
Queen 馃挏
Queen 馃挏 - avatar
+ 3
Maharani Ambica鉂Dm馃毇} that's not the problem here (to try to move code from js tab to html script tag)... OP code is not intended to run in sololearn code playground, and anyway, as all is js tab code is wrapped inside an onload event, it run as expected (with the problem stated, obviously) as soon as you give an online jquery CDN link to the script tag inside html...
15th Jul 2021, 5:20 AM
visph
visph - avatar
+ 3
涓光摠銊┶╁痪 here's the simplest fix to do in your actual js code, to be working as expected (in your context, not in sololearn context, and even in any online code editor, as I don't have changed the src of script tag loading jquery in your html ^^): https://code.sololearn.com/WC4o3XC1NF8P/?ref=app I just have moved the on click handler to be a named function, wich I attached to click listener at end of 'showdata' function ;)
15th Jul 2021, 5:37 AM
visph
visph - avatar
+ 3
涓光摠銊┶╁痪 it's not 'pure' javascript as you use jquery ;) ... and you doesn't really do DOM manipulation (directly) as you modify html code (DOM manipulation means creating elements and add them to DOM, while html modification means editing source code, even if you do that through DOM elements ^^)
15th Jul 2021, 6:29 AM
visph
visph - avatar
+ 2
updating html code means that you provide html string to browser, wich is parsed by browser and let it update DOM tree for you ;P
15th Jul 2021, 6:30 AM
visph
visph - avatar
15th Jul 2021, 5:13 AM
涓光摠銊┶╁痪
涓光摠銊┶╁痪 - avatar
+ 1
Thanks a lot visph for helping me I got the point 馃槉馃槉. Hmm I also often use react to make web application but in this I tried with pure javascript and DOM manipulation
15th Jul 2021, 6:24 AM
涓光摠銊┶╁痪
涓光摠銊┶╁痪 - avatar
+ 1
Hmmm yes visph 馃
15th Jul 2021, 6:32 AM
涓光摠銊┶╁痪
涓光摠銊┶╁痪 - avatar