Question

我有一个过滤器，我在检查输入时动态创建li元素，但问题是当你点击元素时我似乎无法清除输入。所以我希望将输入和动态绑定在一起。提前谢谢你的帮助。

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

它打算将一个函数作为事件处理程序绑定到新插入的li元素，而是实际上在那里调用clear。这实际上意味着您没有绑定事件处理程序。一种解决方案可能是使用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部分。

Input.checked创建需要绑定到输入的Dynamic元素

1 个答案: