Question

如下所示。我通过span元素触发这个特定的弹出框并使用数据内容填充它。

<span class="selectYear addCursor" data-container="body" data-toggle="popover" data-placement="right" data-title="Available Years" data-content="<a href='#' class='executeYearChange'>2013</a> | <a href='#' class='executeYearChange'>2014</a> | <a href='#' class='executeYearChange'>2015</a>">Change Year</span>

继承我的jquery，它应该修改其他几个类上显示的年份

$(function(){
            $('.selectYear').on('click','.executeYearChange', function(){
                var newYear = $(this).text();
                globalYear = newYear;
                $(".globalYearDisplay").text('Current Selected Year: ' + globalYear);
                console.log(newYear, 'Test');
            });
        });

我以为我将click事件绑定到正确的位置（span元素类），但我没有在页面或控制台中得到响应，.globalYearDisplay也没有变化。

显然我的函数看不到.executeYearChange类，所以有没有正确附加它的技巧？我认为以这种方式使用委托函数.on（）将覆盖在页面加载时DOM不可见的事实。

提前致谢

Answer 1

更改您的选择器。 popover附加到span标记，但不是它的子项，因此事件不会按照您希望的方式冒泡。相反，请听取与您定位的元素相匹配的body标签的点击次数。尝试：

$(function(){
    $('body').on('click','.executeYearChange', function(){
            var newYear = $(this).text();
            globalYear = newYear;
            $(".globalYearDisplay").text('Current Selected Year: ' + globalYear);
            console.log(newYear, 'Test');
        });
    });

使用.on（）在popovers'data-content'中定位类

1 个答案: