Question

我有一个问题是在追加后隐藏/显示元素。

jQuery代码

＆＃13;

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');
        }
    });

＆＃13;

<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>

＆＃13;

我正在使用此代码。这在附加新元素之前工作正常，但是在追加新元素后，它不能处理新添加的元素，而是处理旧元素。有什么建议可以解决这个问题吗？

Answer 1

将search_in变量定义移入函数。

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

jQuery-在div hide / show中追加元素后无效

1 个答案: