Question

这是我的HTML：

<div class="filter msg-1">
    <p>Filter has been applied</p>
    <span class="button">Apply Another Filter</span>
</div>
<div class="filter" id="filterSet1">
    <form>
        <select class="select1" required>
            <option value="">---Filter By---</option>
            <option value="OptionOne">Option One</option>
        </select>
        <select class="select2" required>
            <option value="">---Select---</option>
            <option value="Isequalto">Is equal to</option>
            <option value="Isnotequalto">Is not equal to</option>
        </select>
        <input class="text1" type="text" required>
        <input type="submit" value="Apply Filter" class="button">
    </form>
</div>

这是我的JavaScript：

$('.accordion .filter').bind('keyup', function() { 
    var select1Length = $(".select1").length;
    var select2Length = $(".select2").length;
    var text1Length = $(".text1").length;
    if (select1Length > 0 && select2Length > 0 && text1Length > 0) {
       $('.accordion .filter .button').addClass('apply');
    }
});
$('#filterSet1 .button.apply').click(function(){
    $('#filterSet1').hide('fast');
    $('.accordion .filter.msg-1').show('fast');
});

所以我要做的是确保填写所有三个表单字段，如果是，那么提交按钮会获得一个“应用”类。到目前为止，这很有效。

然后，当用户单击该按钮并且它具有该类（.button.apply）时，将触发另一个事件。也就是说，我只是试图用表单隐藏容器，然后显示一个带有消息的容器。问题是，第二个事件的代码不起作用，因为在页面加载时没有.apply

的元素

Answer 1

您应该使用：

$('#filterSet1 .button.apply').live('click',function(){
$('#filterSet1').hide('fast');
$('.accordion .filter.msg-1').show('fast');
});

或者如果你有jquery库1.7以及进一步：

$('#filterSet1 .button.apply').on('click',function(){
$('#filterSet1').hide('fast');
$('.accordion .filter.msg-1').show('fast');
});

Answer 2

您需要使用event delegation，因为您的选择器需要动态评估

$('#filterSet1').on('click', '.button.apply', function(){
    $('#filterSet1').hide('fast');
    $('.accordion .filter.msg-1').show('fast');
});

触发具有上一个事件添加的类的元素的单击事件

2 个答案: