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

Input.checked creates Dynamic element that needs to be bound to input

本文关键字：输入 Dynamic 元素 绑定 checked 创建 Input      更新时间：2023-09-26

我有一个过滤器，当检查输入时，我会动态创建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

此行错误：

$($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部分。

相关文章：