jQuery- After append element in div hide/show not working -
i have problem hide/show 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 = 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(); ++; }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 y </p> </div> </div> <p class="unread"> </p> <div class="usr-msg-timing"> 3 days ago </div> </div> </div>
i using code. working fine before append new element after append new element not working on newly added element worked on old elements. suggestion resolve problem?
move search_in
variable definition in function.
selector_conversation.unbind('keyup').bind('keyup', function(){ var search_in = $('.conversation'); //your code });
Comments
Post a Comment