[SOLVED] Problem with event listener

Question

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.

Answer 1

丹ⓨㄩک廾 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...

Answer 2

visph its still not working in sl but it works fine in web 👌

Answer 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

Answer 4

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

Answer 5

丹ⓨㄩک廾 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 ;)

Answer 6

丹ⓨㄩک廾 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 ^^)

Answer 7

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

Answer 8

Ok lets see Maharani Ambica❣{Dm🚫}

Answer 9

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

Answer 10

Hmmm yes visph 🤓