javascript - Input.checked 创建需要绑定(bind)到输入的动态元素

Question

我有一个过滤器，并且在检查输入时动态创建 li 元素，但问题是当您单击该元素时我似乎无法清除输入。所以我希望将输入和动态绑定(bind)在一起。感谢您提前提供帮助。

HTML:

<ul class="options flavorProfiles">
    <li class="fl"><input type="checkbox" class="chk" id="ftSweet" value="Sweet" />
        <label for="ftSweet">Sweet</label></li>
    <li class="fl"><input type="checkbox" class="chk" id="ftSavory" value="Savory" />
        <label for="ftSavory">Savory</label></li>
    <li class="fl"><input type="checkbox" class="chk" id="ftSpicy" value="Spicy" />
        <label for="ftSpicy">Spicy</label></li>
    <li class="fl"><input type="checkbox" class="chk" id="ftTangy" value="Tangy" />
        <label for="ftTangy">Tangy</label></li>
</ul>
<div class="results-label">Filters Applied:
    <a href="javascript:void(0)" id="filterClear">Remove All</a>
</div>
<ul id="results"></ul>  

JS:

$(document).ready(function() {
    var $li;
    // Adds 'expand' to .cat-filter on click
    $('.filter-header').click(function() {
        if($(this).hasClass("expand")) {
            $(this).removeClass("expand");
        } 
        else {
            $(this).addClass("expand");
        }
    });

    // Turns Filter Groups On/Off
    $('.filter-header.secPB').click(function() {
        $('.options.prodBenefits').toggle();
    });
    $('.filter-header.secSD').click(function() {
        $('ul.options.specialDiets').toggle();
    });
    $('.filter-header.secFP').click(function() {
        $('ul.options.flavorProfiles').toggle();
    });

    // Adds/Removes input value text under results
                            $('.options input').change(function() {
                                if (this.checked) {
                                    $li = $('<li class="active-filter"></li>');
                                    $li.text(this.value);
                                    $('#results').append($li);


                                    var input = this; 
                                    $li.click(function () {
                                        $(input).click();


                                    });
                                }   
                                else {
                                    $('li:contains('+this.value+')', '#results').remove();

                                }
                            });


                            // Clears ALL filter results on click
                            $('#filterClear').click(function() {
                                $('#results').empty($li);
                            });


                        }); // DOM Ready

Answer 1

这一行是错误的:

$($li).on("click", this, clear(this.value));

它打算将一个函数作为事件处理程序绑定(bind)到新插入的 li 元素，但实际上您是在此处调用 clear 的。这实际上意味着您没有绑定(bind)事件处理程序。一种解决方案可能是使用 clear.bind(null, this.value) 作为该参数。

此外，第二个参数很奇怪:您传递了一个 DOM 元素 (this)，但 jQuery 会将其解释为要作为 event.data 传递的数据。它不能将其解释为选择器(如果这是意图的话)，因为它必须是一个字符串。

第三，您正在创建一个已经是 jQuery 对象的 jQuery 对象。因此，请编写 $li 而不是 $($li)。

根据您想要在那里执行的操作，您可能可以使用以下语法:

$li.click(clear.bind(null, this.value));

但由于您实际上想模仿取消选中相应的复选框(输入)，因此触发单击它会更容易。所以用这个代替:

var input = this; // reference to `this` will be lost, so save it
$li.click(function () {
    $(input).click() // Trigger a click event on the checkbox
});

因此，现在单击 li 元素也会触发对复选框的单击，并执行其上的事件处理程序。然后将执行该处理程序中的 else 部分。