Question: I have a view that takes data from JSON, uses that data to populate a list of buttons (with basic information about the data) and then upon clicking the button, I want another panel to be populated with the data bound to the data in the button. 

```
<div ng-controller="QueueCtrl">
    <ul class="list-unstyled" ng-repeat="ticket in tickets">
        <li><div data-queue-item></div></li>
    </ul>
</div>

```

This part populates the list with each list item containing the ticket information I want displayed.

How do I select only the data for the ticket when I press its button to populate my other panel? For example, the next section on the page might be a button that will build an email to the person in the data: (haven't tested this code, please give me pointers if I'm doing it all wrong.

```
<a href="mailto:{{ ticket.email_address }}?subject={{ ticket.ticket_number }}&body=Hello%20{{ ticket.first_name }}" type="button" class="btn btn-default" title="pre-formatted email">{{ ticket.email_address || "cannot find email address"}}</a>

```

Problem is, I don't know how to tell it which ticket in tickets to reference...

Thanks!

Answer: 
Your click event is never getting called because the `li` is hidden by your `focusout` event before it can be triggered.

You could set a timeout to allow for the click to be registered:

```
$("input").focusout(function () {
    setTimeout(function () {
        $(".abc").find("li").hide()
    }, 100)
});

```

[**demo**](http://jsfiddle.net/8t7erade/1/)
How about setting (short) time out on blur (focus out)?

Like this:

```
$("input").on("keyup",function(){
$(".abc li").show();
});
$(".abc li").on("click",function(){
    alert("123");
});
$("input").focusout(function(){
    setTimeout(function(){$(".abc").find("li").hide();}, 150);//i set 150 just as example

});

```

Problem is that blur occurs first, and at that time elements got hidden and mouse event is passed to other (visible) element.