How do I get the value of clicked <span> from multiple spans inside multiple div's while using turn.js library

Question

How do I get the value of clicked from multiple spans inside multiple div's. I have done this it works only if I don't apply the turn.js library other wise it doesn't work. the html I have

 <div class="col-md-6"> <div class="conversation"> <div class="conversation-container myconvo12"> <div class="message received"> <span class="name2">Imran Shah</span><br/><span id="18008"> net shta ? </span> <span class="metadata"><span class="time"> 12:35</span></span> </div> <div class="message sent"> <span class="name">Atif</span><br><span id="18009"> Ao </span> <span class="metadata"><span class="time"> 12:35</span></span> </div> <div class="message received"> <span class="name2">Imran Shah</span><br><span id="18010"> ok </span> <span class="metadata"><span class="time"> 12:36</span></span> </div> <div class="message received"> <span class="name2">Imran Shah</span><br><span id="18028"> Halaka da kam ze ye ? </span> <span class="metadata"><span class="time"> 14:40</span></span> </div> </div> </div> </div>

 $(document).on('click', 'span', function ({ var val = $(this).text() console.log(val) });

Answer 1

try this one

 $('.message span').click(function(){ var val = $(this).text() console.log(val) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-md-6"> <div class="conversation"> <div class="conversation-container myconvo12"> <div class="message received"> <span class="name2">Imran Shah</span><br/><span id="18008"> net shta ? </span> <span class="metadata"><span class="time"> 12:35</span></span> </div> <div class="message sent"> <span class="name">Atif</span><br><span id="18009"> Ao </span> <span class="metadata"><span class="time"> 12:35</span></span> </div> <div class="message received"> <span class="name2">Imran Shah</span><br><span id="18010"> ok </span> <span class="metadata"><span class="time"> 12:36</span></span> </div> <div class="message received"> <span class="name2">Imran Shah</span><br><span id="18028"> Halaka da kam ze ye ? </span> <span class="metadata"><span class="time"> 14:40</span></span> </div> </div> </div> </div>

Answer 2

[Posting as an answer because a comment would not be clear / is too short]

There are issues with the sample code that you have posted and overall it is not clear where the bugs lie as there could be a few.

For example, in the code you posted as the click event listened, you refer to #msgid, which is not in your example html, and this.id looks like it should possibly be $(this).id but it is unclear in the context of your question, and also #msg is not present in your example and I can't understand why you would want to refer to event.taret there.

$(document).on('click', 'span', function ({
            $('#msgid').val(this.id);
            $('#msg').val($(event.target).
        });

I recommend that you review and edit your question and make it more obvious what you are trying to do and what issues you are experiencing.