情景
如上面的模态框，点击左边的添加按钮，会把整个div添加到右边，点击右边的删除按钮，则把整个div添加回左边，就类似于穿梭框的样子。
不难，下面是一开始想到的方案：
$('#SelectedDevice button').click(function(){$(this).text('添加');let this_device = $(this).parent().parent();this_device.remove();//从待选设备框中移除$('#DeviceToBeSelected').append(this_device);autoHeight('DeviceToBeSelected', 'SelectedDevice');//左右div高度自适应});
功能是实现了，但是发现一个问题，就是，我把左边的div.card添加到右边后，再点击button按钮，触发不了对应的事件了。凡是动态添加的元素都出现了这个情况，而页面中原先写死的却不受影响。
看了一下文档，找了一下资料，问题产生的原因应该是这个：
jquery的事件绑定在页面加载时就已经完成，所以之后动态添加的class将无法绑上事件。
解决方案
旧版本的JQuery说是用$().live()。
新版本的JQuery则是用$('父元素').on('click','子元素',function(){})。
即JQ通过绑定父元素来监听其下面的子元素是否发生click事件。这个父元素一定要写死的，没有的话，就绑定在<body>上好了。
方案代码：
$('#SelectedDevice').on('click','button',function(){$(this).text('添加');let this_device = $(this).parent().parent();this_device.remove();//从待选设备框中移除$('#DeviceToBeSelected').append(this_device);autoHeight('DeviceToBeSelected', 'SelectedDevice');});
