0

这与这里的问题几乎相同：Click event doesn't work on dynamic generate elements，但该帖子已有几年历史了，它的解决方案对我不起作用。

我有一个小图像轮播，当我将它直接添加到 html 时它可以正常工作，但是当我动态添加它时，按钮的 jQuery click 事件不起作用。我尝试从button.click()to更改，button.on("click,function(){})但它仍然不起作用。有人可以告诉我 a) 如何让它工作 b) 修改 DOM 如何影响 jQuery 执行，所以我以后会更好地理解它（例如，是否有一些 DOM 元素 jquery 忽略？）

我的代码：

$(document).ready(function(){
    $(".carousel-button-left").on('click',function(){
    var $ul=$(this).next().find(".carouselUl");;
    //alert(""+$ul.html());
    var $lastchild=$ul.children().last();
    $ul.prepend($lastchild);
    });
});


$(document).ready(function(){
    $(".carousel-button-right").on("click",function(){
    var $ul=$(this).prev().find(".carouselUl");
    //alert(""+$ul.html());
    var $firstchild=$ul.children().first();
    $ul.append($firstchild);
    });
});
4

3 回答 3

3

尝试改变：

$(".carousel-button-left").on('click',function(){
...

至

$(document).on('click', '.carousel-button-left', function(){
...

以便 jQuery 接收事件并将与作为参数提供的选择器匹配的元素委托给它。

于 2013-09-02T06:54:50.973 回答
1

使用事件委托为动态添加的元素注册处理程序。

仅使用.on()不会使事件注册委托基于，处理程序附加到的参数和元素很重要

$(document).ready(function () {
    $(document).on('click', ".carousel-button-left", function () {
        var $ul = $(this).next().find(".carouselUl");;
        //alert(""+$ul.html());
        var $lastchild = $ul.children().last();
        $ul.prepend($lastchild);
    });
});

$(document).ready(function () {
    $(document).on("click", ".carousel-button-right", function () {
        var $ul = $(this).prev().find(".carouselUl");
        //alert(""+$ul.html());
        var $firstchild = $ul.children().first();
        $ul.append($firstchild);
    });
});

执行脚本时，添加处理程序的元素集（.on()调用的 LHS）应该存在于 dom 中，然后我们需要在.on()调用中使用第二个参数来指定存在于 LHS 下的目标元素选择器元素。

于 2013-09-02T06:53:12.470 回答
0

尝试

$(document).ready(function(){
    $(document).on('click',".carousel-button-left",function(){
    var $ul=$(this).next().find(".carouselUl");;
    //alert(""+$ul.html());
    var $lastchild=$ul.children().last();
    $ul.prepend($lastchild);
    });
});


$(document).ready(function(){
    $(document).on("click",".carousel-button-right",function(){
    var $ul=$(this).prev().find(".carouselUl");
    //alert(""+$ul.html());
    var $firstchild=$ul.children().first();
    $ul.append($firstchild);
    });
});
于 2013-09-02T06:56:15.380 回答