jQuery- After append element in div hide/show not working

Question

I have a problem to hide/show the element after append.

jQuery Code

var selector_conversation = $('#search-conversation');
    var search_in             = $('.conversation');
    selector_conversation.unbind('keyup').bind('keyup', function(){
        var val = $(this).val();
        search_in.hide();
        var i = 0;
        $('.not-found').remove();
        search_in.each(function(index, element){
            var text = $(element).find('p.usr-msg-title').text();
            if(text.toLowerCase().indexOf(val) >= 0){
                $(this).show();
                i ++;
            }else{
                //console.log('no')
            }
        });

        if(i == 0){
            $('<div class="user-msgs-box not-found" style="text-align: center">' + '<h3 >Not Found</h3>' + '<p>No people or conversations named ' + val + '</p>' + '</div>').insertAfter('#search-form');
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="search-form" action="" method="">
            <input type="text" autocomplete="on" id="search-conversation" class="search" name="" size="20" maxlength="100" alt="" placeholder="Search Topics">
            <a class="sIcon" title="search" href="javascript:void(0);"></a>
        </form>

<div class="conv-box" style="max-height: 783px;">
<div class="cursor_pointer usr-msg-item conversation active"
     data-url="http://localhost/kinnect2/messages/Kinnect-Two-2/9" id="conv-9">
    <div class="usr-msg-block">
        <div class="usr-msg-img">
            <a href="javascript:void(0)">
                <img alt="img"
                     src="http://localhost/kinnect2/photo/8/145209077030568d2592729f77.46907077.jpg?type=image%2Fjpeg">
            </a>
        </div>
        <div class="usr-msg-content">
            <p title="Kinnect, Ravi" class="usr-msg-title courser_pointer">
                Ravi Gowasker
            </p>
            <p class="usr-msg-txt">
                h
            </p>
        </div>
    </div>
    <p class="unread"></p>
    <div class="usr-msg-timing">
        28 minutes ago
    </div>
</div>
<div class="cursor_pointer usr-msg-item conversation" data-url="http://localhost/kinnect2/messages/Kinnect-Two-2/3"
     id="conv-3" style="display: block;">
    <div class="usr-msg-block">
        <div class="usr-msg-img">
            <a href="javascript:void(0)">
                <img alt="img"
                     src="http://localhost/kinnect2/photo/5001/14527741973056979335c44eb8.16760647.jpg?type=image%2Fjpeg">
            </a>
        </div>
        <div class="usr-msg-content">
            <p title="Kinnect, Steave" class="usr-msg-title courser_pointer">
                Apple
            </p>
            <p class="usr-msg-txt">
                how are y 
            </p>
        </div>
    </div>
    <p class="unread">
    </p>
    <div class="usr-msg-timing">
        3 days ago
    </div>
</div>
</div>

I am using this code. This is working fine before append the new element but after append the new element its not working on newly added element but worked on old elements. Any suggestion to resolve this problem?

Answer 1

Move the search_in variable definition in to the function.

selector_conversation.unbind('keyup').bind('keyup', function(){
    var search_in = $('.conversation');
    //your code
});