jquery - 如何向所有匹配的元素添加 onclick 功能

Question

此功能仅有效一次，当我再次单击锚元素时，不会发生任何事情。我认为选择器会将 .click 函数应用于所有匹配的元素？

 $('#welcome-nav li a').click(function (e) {
   // prevent anchor from firing
    e.preventDefault();

    var chosenElement = $(this).parent().attr('class');
    var index = articles.indexOf('.' + chosenElement) + 1;


   //remove all classes of active on articles
    $.each(articles, function (index, value) {

       $(value).removeClass('active');
   })

    $('.' + chosenElement).addClass('active');
    $('#sharpContainer').bgStretcher.sliderDestroy();
    startBgStretcher(returnImageArray(index));


 })

下面是我认为破坏 onclick 功能的插件

    $('#sharpContainer').bgStretcher({

        images: imageContainer,
        anchoring: 'left top', //Anchoring bgStrtcher area regarding window
        anchoringImg: 'left top',   //Anchoring images regarding window
        nextSlideDelay: 8000, //Numeric value in milliseconds. The parameter sets delay until next slide should start.
        slideShowSpeed: 2000, //Numeric value in milliseconds or(’fast’, ‘normal’, ’slow’). The parameter sets the speed of transition between images
        transitionEffect: 'superSlide',
        slideDirection: 'W',
        callbackfunction: homepageSlide
    });



function homepageSlide() {

    //homepage slide is called after a slide has loaded
    var index = $('li.bgs-current').index();

    //hide current article
    $.each(articles, function (index, value) {

        $(value).removeClass('active');
    })

    //show next article
    $(articles[index]).addClass('active');


}

Answer 1

我认为这可能是由于 JQuery 默认绑定的方式。如果您使用：

$(document).on('click', '#welcome-nav li a', function(e){
    e.preventDefault();
    alert('here');
});

发生什么了？

编辑

静态元素使用示例

$('#welcome-nav li').on('click', 'a', function(e){
    e.preventDefault();
    alert('here');
});

Answer 2

你可以试试简单的“return false;” 在 .click 事件函数中完成所有您想做的事情之后。

Answer 3

我会这样绑定它：

$('#welcome li').on('click', 'a', function(e) {
    e.preventDefault();
    whatever();
});