Search code examples
javascriptjqueryhtmlcsssummernote

Why do I have the same summernote div appear for all the lis in my list?

I have multiple lis in an unordered list which when clicked gives me a summernote div. The problem is that all these lis have the same summernote div meaning when I click on a li and change the text in the summernote div the text changes for all the divs.

My list:

<ul id = "courseNav">              
         <li class = "topics" style = "margin-top: -12px"><a href="#">Topic</a></li>
         <li class = "topics"><a href="#">Topic</a></li>
         <li class = "topics"><a href="#">Topic</a></li>
</ul>

My summernote code:

<div id = "editor">Type something...</div>

$('#editor').summernote();

Every li I click in my list will have the same summernote div will appear. How can I fix this?

My button code; $("#add").click(function() { $("#courseNav").append("<li><a href = "#">added</a></li>"); });

Solution

  • I don't really understand your code. But according to what your saying I would suggest using different ids for each summernote . So every list will have its own summernote with unique id in that way changing the text in one summernote will not change the rest

    Hey check this blog out :

    http://toddmotto.com/attaching-event-handlers-to-dynamically-created-javascript-elements/

    It shows how to add a li on a list dinamically