引导类中的jQuery选择器

Question

当我尝试选择包含在带有引导类的div中的元素时，我似乎在使用jQuery时遇到了问题。

守则是：

    <div class="sec">
  <div class="dropdown">
        <h4>Management</h4><hr>
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Staff <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#" data-intrf="dir-01-01" >List</a></li>
            <li><a href="#" data-intrf="dir-01-02">Register</a></li>
            <li><a href="#" data-intrf="dir-01-03">Categories</a></li>
            <li class="divider"></li>
            <li><a href="#" data-intrf="dir-01-04">Messages</a></li>
        </ul>
</div></div>

jQuery代码是：

$('#secInterf').on("click", 'a[data-intrf]', function(){
        alert('What Ever');
});

html代码(带有class=“sec”的div )作为动态内容放置在主页的div(带有id="secInterf")中。问题是，jQuery似乎无法识别带有属性数据的锚点。

对于放置在同一个div (#secInterf)中的其他动态内容，我没有任何问题；所以，我不知道这是jQuery和Bootstrap之间的某种冲突，还是使用了错误的选择器来获得带有属性数据的锚点。

提前谢谢。

Answer 1

尝试交换第一个选择器，如：

$(document.body).on('click', 'a[data-intrf]', function(){ 
   alert('What Ever'); }
);

解释:由于您没有共享完整的代码，只是一个例外，我可以推测，但是由#secInterf选择它的一个可能的原因是，在初始页面加载中，元素是而不是(您也动态地插入了它)。

使用主体或文档作为委托事件的第一个选择器应该总是有效的。这不是最佳实践，因为您应该尝试使用更接近于动态元素的选择器，因为性能原因也是如此：https://api.jquery.com/on/#direct-and-delegated-events

编辑:如OP所述，使用$('body')选择器为他工作。实际上和上面的选择器是一样的。这种差异只是性能上的差异，并在这里详细解释了Difference between $(document.body) and $('body') JQuery

Answer 2

试图使用这段代码..。

$(document).on('click','#Selector' function(){ console.log('What you want '); //it's better then alert (i think). });