首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >通过.click函数对动态添加的类元素进行事件绑定

通过.click函数对动态添加的类元素进行事件绑定
EN

Stack Overflow用户
提问于 2018-06-04 01:53:08
回答 1查看 263关注 0票数 1

我有以下代码:

代码语言:javascript
运行
复制
<div class="row">
    <div class="image">
        <div class="slider-img" style="background-image: url('<?php echo site_url('assets/imagens/gama-doce-slider.png') ?>');"></div>
        <div class="bottom-buttons">
            <span class="see-package">See Package</span>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
// First part, change background to the package image and change the text
    $(".see-package").click(function() {
        $(".slider-img").css("background-image", "url(../assets/imagens/embalagem-teste.jpg)");
        $(this).addClass( "see-product" );
        $(this).removeClass( "see-package" );
        $(this).text( "See Product" );
    });
// Second part, adding back the 'see package' and changing background to original
    $(".image .bottom-buttons").on("click", ".see-product", function(event){
        $(".slider-img").css("background-image", "url(../assets/imagens/gama-doce-slider.png)");
        $(this).addClass( "see-package" );
        $(this).removeClass( "see-product" );
        $(this).text( "See Package" );
    });
});
</script>

这样做的目的是能够改变滑块的背景和跨度的文本,以便用户可以在“查看包”和“查看产品”之间切换。

jquery代码的第二部分基于我在这个线程中读到的内容:Event binding on dynamically created elements?

  • 如果我删除第二部分,代码将完美工作,仅更改文本和背景(没有更改回原处的选项)
  • 如果我添加第二部分,则不再更改背景,但仍会更改跨度的文本。

我做错了什么?

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50669342

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档