Question

I’m using Knockout.js to add items to an un-ordered list in a drop down. I’d like to capture clicks on these list items, but I’m not sure how to do it.

I think right now the list is being dismissed by a body click (which hides all drop downs), but adding e.stopPropagation() on the click even didn’t seem to work.

Here’s a snippet of the code below (spaced for readability…invalid that way, though), and you can see the search bar in action (with full code) HERE.

$("#dropdown").append("
   <ul id='list' data-bind=\"template: { 
         name:'obj', foreach:objects }, 
         click: function() {
               $('.listObjItem').on('click', function() {   
                     // CAPTURE THE CLICK (not working)          
                     alert($('#search').val($(this).text())); 
         });}
   \">
   </ul>");

$("#searchContainer").append(
      "<script type='text/html' id='obj'>
             <li class='listObjItem'>
                    <span data-bind='text: name'></span>&nbsp;in&nbsp;
                    <strong data-bind='text: type'></strong>
             </li>
       </script>");

Answer 1

Try delegating the event..

Instead of

$('.listObjItem').on('click', function() {

do this

$('body').on('click','.listObjItem' , function() { 

'body' can be replaced with any static parent container..