需要一种基于用户输入过滤 div 并同时保持事件绑定的方法

Question

目前我正在使用array.filter 过滤一个数组，并传入一个正则表达式。 我正在过滤的数组是基于 div 的内容。

该 div 的每个子 div 都有一个文本，我用 $.text() 提取并放入它自己的数组中，以便我可以过滤它。然后我输出过滤后的数组的内容。

问题是过滤需要一个字符串数组，因此我制作了单独的数组，我过滤然后打印到 html。但是，当用户单击列表中的一项时，什么也没有发生，因为用户单击了未绑定到事件的 div。我准备好对文档进行绑定，并使用绑定事件获取data-item-pageid 属性的值。

我需要一种方法来访问被点击元素的data-item-pageid，并且仍然很快。我不希望每次用户键入时都重新绑定事件，所以我认为需要更改逻辑。我需要隐藏与正则表达式不匹配的 div。

这是html：

<div class="content">
    <div class="categories">
        <div class="item" data-item-pageid="1">text1</div>
        <div class="item" data-item-pageid="2">text2</div>
        <div class="item" data-item-pageid="3">text3</div>
    </div>
    <div class="categories">
        <div class="item" data-item-pageid="4">text4</div>
        <div class="item"data-item-pageid="5">text5</div>
        <div class="item"data-item-pageid="6">text6</div>
    </div>
</div>
<div class="filter_result"></div>

这是 JavaScript 代码：

// Binds the click event for each category item
$('.category_item').click(function() {
   console.log($(this));
});

...

// Array for filter
filterArray = [];
for (var i = 0; i < $categoryItems.length; ++i) {
    filterArray[i] = $($categoryItems[i]).text();
}

...

function filterList(key) {

    var result = filterArray.filter(/./.test.bind(new RegExp(key, 'i')));

    if (key != '' || key) {
        var markup = []; //ugh
        for (var i = 0; i < result.length; ++i) {
            markup += '<div class="category_item">' + result[i] + '</div>';
        }

        if ($categoryItems.is(':visible'))
            $categoriesDiv.toggle();

        $filteredResult.html(markup);
    } else {
        $filteredResult.html('');

        if (!$categoryItems.is(':visible'))
            $categoriesDiv.toggle();
    }
}

Answer 1

你可以delegated event handling

$(CONTAINER_SELECTOR).on('click', CHILD_SELECTOR, function(){ 
     /* Your click handler*/ 
});

• 其中CONTAINER_SELECTOR 是一个未添加/删除的元素，因此它会保留其侦听器
• CHILD_SELECTOR 是添加/删除子项的选择器，我们希望听到其点击

在您的情况下，$(CONTAINER_SELECTOR) 可能是 $filteredResult 和 CHILD_SELECTOR .category_item。

要更好地了解委托事件，请查看official docs 或查看我的other answers 之一关于委托事件。

更新

您可以使用以下方法轻松检索filtered list：

$elements = $('.item');
$filteredList = $elements.filter(
     function(index){ 
         return conditionIsMetFor($(this).text()); // this refers to the element under iteration
     }
);

那你就不能拿 $filteredList 和：

• $.clone()它
• 迭代它并根据它们包含的$.data() 创建新元素
• 等