动态添加的元素上添加点击事件，如何解决

[jacky198554]

现在在做web开发，需要对传感器的数据进行实时监测，传感器的分类和数量不定，所有需要需要动态进行添加；添加完元素后，在上面添加的点击事件，不响应。

代码如下：
1.因为需要动态添加分类，所有采用tab的方式，将不同分类的传感器放在不同的分类下，代码如下：
function addTab(type, addTo) {
var id_tab = 'id_tab_' + type;
var tab = $('<div class="tab-2"></div>')

var tab_label = $('<label for="tab2_' + type + '" style="padding:0px;margin: 0 0 0 0;width:100px;height:30px; font:bold; color:white">' + type + '</label>')
tab_label.appendTo(tab)

var tab_input = $('<input id="tab2_' + type + '" name="tabs-two" type="radio" checked="checked">')
tab_input.appendTo(tab)

var id_div = id_tab + '_div'
var tab_div = $('<div id="' + id_div + '" style="padding:0px;margin:0px;width:800px;height:600px;position:absolute;left:5px"></div>')
tab_div.appendTo(tab)

tab.appendTo(addTo)
}

2.再将各个传感器的元素动态添加到对应的tab下：
注：在动态添加tab标签之前下面代码是好用的，添加tab后，就不响应了，$(document).on绑定也试过，不好用。
function addPFItemToTab(index, tab) {
var id_tab = 'id_tab_' + tab;
var id_div = id_tab + '_div'
addPersonnalInfoItem(index+'_'+tab, id_div)
}

function addPersonnalInfoItem(index, part) {
// 添加整体的布局
var id_item = 'id_item_pf_' + index
console.log(id_item)

var item_pf = $('<div></div>')
item_pf.attr('id', id_item)
item_pf.addClass('item_personnal_info') // 如果动态添加时不好用，可以尝试写在当前head标签中试试

// 添加title部分
var id_item_title = id_item + '_title'

var item_pf_title = $('<div></div>')
item_pf_title.attr('id', id_item_title)
item_pf_title.addClass('i_personnal_info_title')
item_pf_title.appendTo(item_pf)

var item_pf_title_icon = $('<img/>')
item_pf_title_icon.attr('id', id_item_title + '_icon')
item_pf_title_icon.attr('src', '/img/ic_account_child_32px.png')
item_pf_title_icon.appendTo(item_pf_title)

var item_pf_title_text_bedid = $('<p style="position:relative; left:35px;top:-30px; font:bold; color:white">未知</p>')
item_pf_title_text_bedid.attr('id', id_item_title + '_text_bedid')
console.log('item_pf_title_text_bedid:' + id_item_title + '_text_bedid')
item_pf_title_text_bedid.addClass('item_pf_title_img')
item_pf_title_text_bedid.appendTo(item_pf_title)

var item_pf_title_text_person_name = $('<p style="position:relative; left:85px;top:-51px; font:bold; color:white">未知</p>')
item_pf_title_text_person_name.attr('id', id_item_title + '_text_person_name')
item_pf_title_text_person_name.addClass('item_pf_title_img')
item_pf_title_text_person_name.appendTo(item_pf_title)

var item_pf_title_img_wechat = $('<img/>')
item_pf_title_img_wechat.attr('id', id_item_title + '_img_wechat')
item_pf_title_img_wechat.attr('src', '/img/ic_wechat_32px.png')
item_pf_title_img_wechat.addClass('item_pf_title_img')
item_pf_title_img_wechat.appendTo(item_pf_title)

var item_pf_title_img_edit = $('<img onclick=\'clickEdit(this)\'/>')
item_pf_title_img_edit.attr('id', id_item_title + '_img_edit')
item_pf_title_img_edit.attr('src', '/img/ic_mode_edit_32px.png')
item_pf_title_img_edit.addClass('item_pf_title_img')
item_pf_title_img_edit.appendTo(item_pf_title)

var item_pf_title_img_remove = $('<img onclick=\'clickRemove(this)\'/>')
item_pf_title_img_remove.attr('id', id_item_title + '_img_remove')
item_pf_title_img_remove.attr('src', '/img/ic_remove_32px.png')
item_pf_title_img_remove.addClass('item_pf_title_img')
item_pf_title_img_remove.appendTo(item_pf_title)

// 添加心跳信息显示
var id_item_heart = id_item + '_heart'

var item_pf_heart = $('<div></div>')
item_pf_heart.attr('id', id_item_heart)
item_pf_heart.addClass('item_pf_info')
item_pf_heart.appendTo(item_pf)

var item_pf_heart_img_heart = $('<img/>')
item_pf_heart_img_heart.attr('id', id_item_heart + "_img_heart")
item_pf_heart_img_heart.attr('src', '/img/ic_heart_rate_48px.png')
item_pf_heart_img_heart.addClass('box_32px_32px')
item_pf_heart_img_heart.appendTo(item_pf_heart)

var item_pf_heart_text_heart = $('<h3>--</h3>')
item_pf_heart_text_heart.attr('id', id_item_heart + "_text_heart")
console.log('item_pf_heart_text_heart:' + id_item_heart + "_text_heart")
item_pf_heart_text_heart.addClass('text_black_absolute_5px_40px')
item_pf_heart_text_heart.appendTo(item_pf_heart)

//添加呼吸信息显示
var id_item_breath = id_item + '_breath'

var item_pf_breath = $('<div></div>')
item_pf_breath.attr('id', id_item + "_breath")
item_pf_breath.addClass('item_pf_info')
item_pf_breath.appendTo(item_pf)

var item_pf_breath_img_breath = $('<img/>')
item_pf_breath_img_breath.attr('id', id_item_breath + "_img_breath")
item_pf_breath_img_breath.attr('src', '/img/ic_breath_48px.png')
item_pf_breath_img_breath.addClass('box_32px_32px')
item_pf_breath_img_breath.appendTo(item_pf_breath)

var item_pf_breath_text_breath = $('<h3>--</h3>')
item_pf_breath_text_breath.attr('id', id_item_breath + "_text_breath")
console.log('item_pf_breath_text_breath:' + id_item_breath + "_text_breath")
item_pf_breath_text_breath.addClass('text_black_absolute_5px_40px')
item_pf_breath_text_breath.appendTo(item_pf_breath)

// 添加着床信息显示
var id_item_bedstat = id_item + '_bedstat'

var item_pf_bedstat = $('<div></div>')
item_pf_bedstat.attr('id', id_item_bedstat)
item_pf_bedstat.addClass('item_pf_info')
item_pf_bedstat.appendTo(item_pf)

var item_pf_bedstat_img_bedstat = $('<img/>')
item_pf_bedstat_img_bedstat.attr('id', id_item_bedstat + "_img_bed")
item_pf_bedstat_img_bedstat.attr('src', '/img/ic_bed_48px.png')
item_pf_bedstat_img_bedstat.addClass('box_32px_32px')
item_pf_bedstat_img_bedstat.appendTo(item_pf_bedstat)

var item_pf_bedstat_text_bedstat = $('<h3 style="width:50px;">--</h3>')
item_pf_bedstat_text_bedstat.attr('id', id_item_bedstat + "_text_bedstat")
item_pf_bedstat_text_bedstat.addClass('text_black_absolute_5px_40px')
item_pf_bedstat_text_bedstat.appendTo(item_pf_bedstat)

// 备注信息
var id_item_comment = id_item + '_comment'

var item_pf_comment = $('<div>备注信息</div>')
item_pf_comment.attr('id', id_item_comment)
console.log('item_pf_comment:' + id_item_comment)
item_pf_comment.addClass('comment')
item_pf_comment.appendTo(item_pf)

// 报警信息显示
var id_item_alarm_info = id_item + '_alarm_info'

var item_pf_alarm_info = $('<div></div>')
item_pf_alarm_info.attr('id', id_item_alarm_info)
console.log('item_pf_alarm_info:' + id_item_alarm_info)
item_pf_alarm_info.addClass('alarm_info')
item_pf_alarm_info.appendTo(item_pf)

var item_pf_alarm_img_alarm = $('<img/>')
item_pf_alarm_img_alarm.attr('id', id_item_alarm_info + "_img_alarm")
item_pf_alarm_img_alarm.attr('src', '/img/ic_report_problem.png')
item_pf_alarm_img_alarm.addClass('box_32px_32px')
item_pf_alarm_img_alarm.appendTo(item_pf_alarm_info)

var item_pf_alarm_text_alarm_info = $('<h2 style="color:red;">报警信息</h2>')
item_pf_alarm_text_alarm_info.attr('id', id_item_alarm_info + "_text_alarm_info")
console.log('item_pf_alarm_text_alarm_info:' + id_item_alarm_info + "_text_alarm_info")
item_pf_alarm_text_alarm_info.addClass('text_black_absolute_5px_40px')
item_pf_alarm_text_alarm_info.appendTo(item_pf_alarm_info)

console.log(part)
item_pf.appendTo($("#"+part))
}

3.在“1”中提到的tab添加到下面对应的div中：
<!--动态添加床位信息-->
<div class="all_bed_item" id="id_all_bed">
<div class="tabs" id="id_tabs">
tab标签添加在此处
</div>
</div>

想请问一下各位大神，有什么解决方案吗？

[凌晨4点5杀老大爷]

动态绑定事件

[jio可]

去看下事件委托代理

[jacky198554]

引用 2 楼 jio可 的回复:

去看下事件委托代理

你好，谢谢你的回答，我是看了下面的方法： https://www.cnblogs.com/xyyl/p/10988501.html 试了一下，可以响应点击，但是整个父元素可以响应了，子元素的id取不到； 如果我用的有问题，应该怎么写啊？ 还有其他的方法可以试一下吗？

[cn00439805]

子元素 = e.currentTarget

[jio可]

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<style>
  .tab-container {
    width: 100%;
  }

  .tab-container .tab-head {
    line-height: 40px;
    clear: both;
  }
  .tab-container .tab-content {
    padding: 0px;
    margin: 0px;
    width: 800px;
    height: 600px;
    clear: both;
  }
  .tab-container .tab-head-item {
    float: left;
  }
  .tab-container .tab-head-item.active {
    background: lightblue;
    color: #fff;
  }

  .tab-container .tab-head label {
    line-height: 40px;
    padding: 0px;
    margin: 0 0 0 0;
    width: 100px;
    height: 30px;
    font-weight: bold;
    color: #999;
  }
  .tab-container .tab-content .tab-panel {
    display: none;
  }
  .tab-container .tab-content .tab-panel.active {
    display: block;
  }

  .tab-container .tab-content .tab-panel .text_bedid {
    position: relative;
    left: 35px;
    top: -30px;
    font: bold;
    color: white;
  }

  .tab-container .tab-content .tab-panel .text_person_name {
    position: relative;
    left: 85px;
    top: -51px;
    font: bold;
    color: white;
  }
</style>

<body>
  <div class="tab-container">
    <div class="tab-head"></div>
    <div class="tab-content"></div>
  </div>
  <script>
    // 添加tab
    var data = [
      {
      id: 'tab_id_1',
      type: 'tab_type_1',
      title: 'tab_title_1',
      person_info: {
        name: 'xxx'
      },
      heart_info: {
        text: '心跳xxx'
      },
      breath_info: {
        text: '呼吸xxx'
      },
      bedstat_info: {
        id: '0001',
        text: '着床xxx'
      },
      comment: '备注',
      alarm_info: {
        text: '警告xxx'
      }
    },
      {
      id: 'tab_id_2',
      type: 'tab_type_2',
      title: 'tab_title_2',
      person_info: {
        name: 'xxx'
      },
      heart_info: {
        text: '心跳xxx'
      },
      breath_info: {
        text: '呼吸xxx'
      },
      bedstat_info: {
        id: '0001',
        text: '着床xxx'
      },
      comment: '备注',
      alarm_info: {
        text: '警告xxx'
      }
    }
    ]
    var tabContainer = $('.tab-container')
    function addTab(data) {
      var tabHead = ''
      var tabContent = ''
      data.forEach((item, index) => {
        tabHead += `<div class="tab-head-item">
                  <label for="tab_${item.id}">${item.title}</label>
                  <input id="tab_${item.id}" name="tabs-two" type="radio">
                </div>`
        tabContent += `<div class="tab-panel" id="tab_${item.id}">${item.title}
                  <div class="item_personnal_info">
                    <div class="i_personnal_info_title">个人信息</div>
                    <img src="/img/ic_account_child_32px.png" />
                    <p class="item_pf_title_img text_bebid">${item.bedstat_info.id}</p>
                    <p class="item_pf_title_img text_person_name">${item.person_info.name}</p>
                    <img class="item_pf_title_img" src="/img/ic_wechat_32px.png" />
                    <img class="item_pf_title_img edit" src="/img/ic_mode_edit_32px.png" pid="tab_${item.id}" />
                    <img class="item_pf_title_img remove" src="/img/ic_mode_edit_32px.png" pid="tab_${item.id}" />
                  </div>
                  <div class="item_pf_info">
                    <img class="box_32px_32px" src="/img/ic_heart_rate_48px.png">
                    <h3 class="text_black_absolute_5px_40px">心跳信息</h3>
                    <div class="heart">
                      ${item.heart_info}
                    </div>
                  </div>
                  <div class="item_pf_info">
                    <img class="box_32px_32px" src="/img/ic_breath_48px.png">
                    <h3 class="text_black_absolute_5px_40px breath">呼吸信息</h3>
                    <div class="breath">
                      ${item.breath_info}
                    </div>
                  </div>
                  <div class="item_pf_info">
                    <img class="box_32px_32px" src="/img/ic_bed_48px.png">
                    <h3 class="text_black_absolute_5px_40px">着床信息</h3>
                    <div class="bedstat">
                        ${item.bedstat_info}
                    </div>
                  </div>
                  <div class="item_pf_info">
                    <h3 class="comment">备注信息</h3>
                    <div class="comment">${item.comment}</div>
                  </div>
                  <div class="alarm_info">
                    <img class="box_32px_32px" src="/img/ic_report_problem.png">
                    <h2 class="text_black_absolute_5px_40px">报警信息</h2>
                    <div class="alarm_info">
                      ${item.alarm_info}
                    </div>
                  </div>
              </div>`
      })
      $('.tab-head').html(tabHead)
      $('.tab-content').html(tabContent)
      $('.tab-head').find('.tab-head-item').eq(0).addClass('active')
      $('.tab-head').find('input').eq(0).attr('checked', 'checked')
      $('.tab-content').find('.tab-panel').eq(0).addClass('active')
    }
    // 编辑
    tabContainer.on('click', '.edit', function () {
      var el = $(this)
      console.log('--编辑--')
      console.log(el.attr('pid'))
      alert('编辑：：：'+el.attr('pid'))
    })
    // 删除
    tabContainer.on('click', '.remove', function () {
      var el = $(this)
      console.log('--删除--')
      console.log(el.attr('pid'))
      alert('删除：：：'+el.attr('pid'))
    })
    // tab切换
    tabContainer.on('change', '.tab-head-item', function() {
      var el = $(this)
      console.log($(this).index())
      $('.tab-head').find('.tab-head-item').removeClass('active').eq(el.index()).addClass('active')
      $('.tab-content').find('.tab-panel').removeClass('active').eq(el.index()).addClass('active')
    })
    addTab(data)
  </script>
</body>

[jacky198554]

谢谢各位，问题已经解决了