js中append动态生成元素,无法触发popover弹窗事件的解决办法

最新推荐文章于 2025-05-27 10:20:01 发布

zhouzhuoYan

最新推荐文章于 2025-05-27 10:20:01 发布

阅读量607

点赞数 1

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_41187577/article/details/115694004

版权

js 专栏收录该内容

13 篇文章

订阅专栏

直接上demo吧：

<div>
    <a href="javascript:;" class="btn btn-sm" style="margin: 20px;background-color: #0b93d5;color: #ffffff" onclick="addRow()"><span class="glyphicon glyphicon-plus" ></span> 添加一行</a>
</div>
<table class="" style="width: 300px;margin: 0 20px;">
    <thead>
    <tr align="center">
        <th>图片</th>
    </tr>
    </thead>
<tbody id="item-list">
    <tr>
        <td style="text-align: left; line-height: 72px;width: 200px">
            <img src="/images/gray.gif" style="height: 60px;width: 60px;">
            <a href="javascript:;" class="finder-select-image">+ 添加图片</a>
        </td>
    </tr>
</tbody>

</script>
// 增加一行
function addRow() {
  var html_str = '<tr><td style="text-align: left; line-height: 72px;width: 200px">' +
                        '<img src="/images/gray.gif" style="height: 60px;width: 60px;">' +
                         '<a href="javascript:;" class="finder-select-image">+ 添加图片</a>' +
                   '</td></tr>';
  var oTr = $(html_str);
  $('#item-list').append(oTr);
  
  //动态生成元素之后，要重新给元素绑定事件（事件委托），否则是无法触发弹窗事件滴
  oTr.find('.finder-select-image').popover({
        html: true, //向弹出框插入 HTML, 如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容
        placement: 'auto right', //定位弹框 'auto right'弹出框将会尽可能显示在右边
        trigger: 'hover', //定义如何触发弹出框
        delay: {hide: 2000}, //隐藏弹出框的毫秒数
        container: 'body', //向指定元素追加弹出框
        title: '图片来源',
        //弹出框的内容
        content: '<div class="btn-group-vertical"><button type="button" class="btn btn-default" onclick="SelectImgFromLocal(this)">本地上传</button><button type="button" class="btn btn-default" onclick="SelectImgFromStorage(this)">图库选择</button></div>',
    });
  
}

//给选择器绑定弹窗事件
$('.finder-select-image').popover({
        html: true, //向弹出框插入 HTML, 如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容
        placement: 'auto right', //定位弹框 'auto right'弹出框将会尽可能显示在右边
        trigger: 'hover', //定义如何触发弹出框
        delay: {hide: 2000}, //隐藏弹出框的毫秒数
        container: 'body', //向指定元素追加弹出框
        title: '图片来源',
        //弹出框的内容
        content: '<div class="btn-group-vertical"><button type="button" class="btn btn-default" onclick="SelectImgFromLocal(this)">本地上传</button><button type="button" class="btn btn-default" onclick="SelectImgFromStorage(this)">图库选择</button></div>',
    });
</script>

页面展示：
在这里插入图片描述