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

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

所以我要做的是确保填写了所有三个表单字段，如果是这样，那么提交按钮就会得到一个类"apply"。这行得通，到目前为止一切顺利。

然后，当用户单击该按钮并且它具有该类 （.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

您需要使用事件委派，因为您的选择器需要动态评估

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