文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >问答首页 >如何使新创建的元素具有与现有元素相同的功能？

问如何使新创建的元素具有与现有元素相同的功能？
EN

Stack Overflow用户
提问于 2019-03-19 02:57:50
回答 2查看 40关注 0票数 0
关联问题
换一批

我正在开发一个应用程序，允许用户创建新的项目，编辑现有的项目，或通过旁边出现的相应图标删除项目。

对于现有项，操作图标在悬停时显示良好，并且附加到它的事件处理程序，对于这种情况下的onClick事件处理程序。

​

代码语言：javascript
运行
AI代码解释
复制
$(document).ready(function() {
  var ul = `
					<ul class="list-inline in-item" style="padding: 10px;">
					  <li><a href="#"><i class="fa fa-plus-circle icon-add"></i></a></li>
					  <li><a href="#"><i class="fa fa-pencil-square-o icon-edit"></i></a></li>
					  <li><a href="#"><i class="fa fa-trash-o icon-remove"></i></a></li>
					  <li><a href="#"><i class="fa fa-arrows-v icon-move"></i></a></li>
					</ul>
				`;

  $('.item').hover(
    function() {

      $(ul).insertBefore($(this).find('.item-head'));

    },
    function() {
      $(this).find('ul.list-inline').remove();
    });

  $('body').on('click', '.icon-add', function() {
    // Add Item
    items = `
				<div class="item">
				  <h3 class="item-head" contenteditable>[Type Item Here] [label]</h3>
				  <p contenteditable>[Type what it does]</p>
				</div>
			`;
    // $('body').append(item);
    $('.item-container').append(items);
    return false;
  });

  $('body').on('click', '.icon-edit', function() {
    // Edit on Item
  });

  $('body').on('click', '.icon-remove', function() {
    // Remove Item and its definition

  });

  $('body').on('click', '.icon-move', function() {
    // Move item to up or down
  });

})
代码语言：javascript
运行
AI代码解释
复制
.item-head {
  color: #365efe;
}

.action-icon {
  float: left;
  margin-top: 25px;
  margin-left: -40px;
}

.icon-add {
  color: #4caf50;
}

.icon-edit {
  color: #00bcd4;
}

.icon-remove {
  color: #f44336;
}

.icon-move {
  color: #9e9e9e;
}

.in-item {
  display: block;
}

.out-item {
  display: none;
}

.list-inline>li:last-child {
  padding-right: 25px;
}

.list-inline {
  float: left;
  background: trasparent;
  position: absolute;
  left: -110px;
  top: 12px;
  height: 40px;
}

div.item {
  position: relative;
}
代码语言：javascript
运行
AI代码解释
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="col-sm-12">
  <div class="message"></div>
  <h3>Preview</h3>
  <div class="container" style="border: 1px solid #ccc;width: 70%;">
    <div class="row">
      <div class="col-xs-12 item-container">
        <div class="item">
          <h3 class="item-head" style="float: left;">Customer [form]</h3>
          <p style="clear: both;">Customer is module for recording information related to customer such as Name, Address, Date of Birth, Place of Birth, ID Number, etc.</p>
        </div>
        <div class="item">
          <h3 class="item-head">First Name English [label]</h3>
          <p class="definition">The name that was given to you when you were born and that comes before your family name. This field accept only English Character.</p>
        </div>
        <div class="item">
          <h3 class="item-head">Salutation [label]</h3>
          <p>A greeting in words or actions, or the words used at the beginning of a letter or speech. This field has values such as Mr, Ms, Miss.</p>
        </div>
      </div>
    </div>
  </div>
  </form>
</div>

​

但是，通过添加图标创建的新条目没有附加的操作图标，也没有与现有图标相同的功能，因为它已经与现有条目完全相同。

如何使新创建的项目与现有项目一样工作？谢谢

jquery
html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-03-19 06:24:06

你不需要动态地追加列表。写一次，重用它。

​

代码语言：javascript
运行
AI代码解释
复制
$(document).ready(function() {
  
$('.list-inline').mouseleave(function(){
  $(this).hide();
})

$('body').on('mouseenter', '.item', function(e){
  var topPosition = $(this).position().top + 10;
  $('.list-inline').show().css('top', topPosition);
  
})

  $('body').on('click', '.icon-add', function() {
    // Add Item
    items = `
				<div class="item">
				  <h3 class="item-head" contenteditable>[Type Item Here] [label]</h3>
				  <p contenteditable>[Type what it does]</p>
				</div>
			`;
    // $('body').append(item);
    $('.item-container').append(items);
    return false;
  });

  $('body').on('click', '.icon-edit', function() {
    // Edit on Item
  });

  $('body').on('click', '.icon-remove', function() {
    // Remove Item and its definition

  });

  $('body').on('click', '.icon-move', function() {
    // Move item to up or down
  });

})
代码语言：javascript
运行
AI代码解释
复制
.item-head {
  color: #365efe;
}

.action-icon {
  float: left;
  margin-top: 25px;
  margin-left: -40px;
}

.icon-add {
  color: #4caf50;
}

.icon-edit {
  color: #00bcd4;
}

.icon-remove {
  color: #f44336;
}

.icon-move {
  color: #9e9e9e;
}

.in-item {
  display: block;
}

.out-item {
  display: none;
}

.list-inline>li:last-child {
  padding-right: 25px;
}

.list-inline {
  background: trasparent;
  position: absolute;
  left: -110px;
  top: 12px;
  height: 40px;
}

div.item {
  position: relative;
  overflow: hidden;
}
代码语言：javascript
运行
AI代码解释
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="col-sm-12">
  <div class="message"></div>
  <h3>Preview</h3>
  <div class="container" style="border: 1px solid #ccc;width: 70%;">
    <div class="row" style="position:relative">
      <div class="col-xs-12 item-container">
      
      
      <!-- list here -->
          <ul class="list-inline in-item" style="display:none;padding: 10px;">
					  <li><a href="#"><i class="fa fa-plus-circle icon-add"></i></a></li>
					  <li><a href="#"><i class="fa fa-pencil-square-o icon-edit"></i></a></li>
					  <li><a href="#"><i class="fa fa-trash-o icon-remove"></i></a></li>
					  <li><a href="#"><i class="fa fa-arrows-v icon-move"></i></a></li>
					</ul>
          
          
          
        <div class="item">
          <h3 class="item-head" style="float: left;">Customer [form]</h3>
          <p style="clear: both;">Customer is module for recording information related to customer such as Name, Address, Date of Birth, Place of Birth, ID Number, etc.</p>
        </div>
        <div class="item">
          <h3 class="item-head">First Name English [label]</h3>
          <p class="definition">The name that was given to you when you were born and that comes before your family name. This field accept only English Character.</p>
        </div>
        <div class="item">
          <h3 class="item-head">Salutation [label]</h3>
          <p>A greeting in words or actions, or the words used at the beginning of a letter or speech. This field has values such as Mr, Ms, Miss.</p>
        </div>
      </div>
    </div>
  </div>
  </form>
</div>

​

票数 1
EN

Stack Overflow用户

发布于 2019-03-19 06:46:15

@Ibra，非常感谢你的有用的答案，我会接受它作为答案。然而，我想分享我对我的问题的发现。

根据这篇文章：is-it-possible-to-use-jquery-on-and-hover，我发现问题出在我的事件处理程序.hover()上，我调用它来填充操作图标。

由于.hover()不能很好地处理从JS创建动态元素，而且在.on()处理程序上使用.hover()也很奇怪，因此它使我无法从动态元素中调用我的操作图标。

因此，从上面帖子中的建议答案来看，它正在努力用以下代码取代.hover()：

代码语言：javascript
运行
AI代码解释
复制
$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

因此，我将.hover()处理程序更改为事件处理程序.mouseenter()和.mouseleave()，如下所示

代码语言：javascript
运行
AI代码解释
复制
/**
* Show Action Icons on Mouse over and hide it
* on Mouse out
*/
$('body').on({
    mouseenter: function () {
        //stuff to do on mouse enter
        $(ul).insertBefore($(this).find('.item-head'));
    },
    mouseleave: function () {
        //stuff to do on mouse leave
        $(this).find('ul.list-inline').remove();
    }
}, ".item");

因此，我的应用程序如下所示

​

代码语言：javascript
运行
AI代码解释
复制
$(document).ready(function() {
  var ul = `
					<ul class="list-inline in-item" style="padding: 10px;">
					  <li><a href="#"><i class="fa fa-plus-circle icon-add"></i></a></li>
					  <li><a href="#"><i class="fa fa-pencil-square-o icon-edit"></i></a></li>
					  <li><a href="#"><i class="fa fa-trash-o icon-remove"></i></a></li>
					  <li><a href="#"><i class="fa fa-arrows-v icon-move"></i></a></li>
					</ul>
				`;

  /**
   * Show Action Icons on Mouse over and hide it
   * on Mouse out
   */
  $('body').on({
    mouseenter: function() {
      //stuff to do on mouse enter
      $(ul).insertBefore($(this).find('.item-head'));
    },
    mouseleave: function() {
      //stuff to do on mouse leave
      $(this).find('ul.list-inline').remove();
    }
  }, ".item");

  $('body').on('click', '.icon-add', function() {
    // Add Item
    items = `
				<div class="item">
				  <h3 class="item-head" contenteditable>[Type Item Here] [label]</h3>
				  <p contenteditable>[Type what it does]</p>
				</div>
			`;
    // $('body').append(item);
    $('.item-container').append(items);
    return false;
  });

  $('body').on('click', '.icon-edit', function() {
    // Edit on Item
  });

  $('body').on('click', '.icon-remove', function() {
    // Remove Item and its definition

  });

  $('body').on('click', '.icon-move', function() {
    // Move item to up or down
  });

})
代码语言：javascript
运行
AI代码解释
复制
.item-head {
  color: #365efe;
}

.action-icon {
  float: left;
  margin-top: 25px;
  margin-left: -40px;
}

.icon-add {
  color: #4caf50;
}

.icon-edit {
  color: #00bcd4;
}

.icon-remove {
  color: #f44336;
}

.icon-move {
  color: #9e9e9e;
}

.in-item {
  display: block;
}

.out-item {
  display: none;
}

.list-inline>li:last-child {
  padding-right: 25px;
}

.list-inline {
  float: left;
  background: trasparent;
  position: absolute;
  left: -110px;
  top: 12px;
  height: 40px;
}

div.item {
  position: relative;
}
代码语言：javascript
运行
AI代码解释
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="col-sm-12">
  <div class="message"></div>
  <h3>Preview</h3>
  <div class="container" style="border: 1px solid #ccc;width: 70%;">
    <div class="row">
      <div class="col-xs-12 item-container">
        <div class="item">
          <h3 class="item-head" style="float: left;">Customer [form]</h3>
          <p style="clear: both;">Customer is module for recording information related to customer such as Name, Address, Date of Birth, Place of Birth, ID Number, etc.</p>
        </div>
        <div class="item">
          <h3 class="item-head">First Name English [label]</h3>
          <p class="definition">The name that was given to you when you were born and that comes before your family name. This field accept only English Character.</p>
        </div>
        <div class="item">
          <h3 class="item-head">Salutation [label]</h3>
          <p>A greeting in words or actions, or the words used at the beginning of a letter or speech. This field has values such as Mr, Ms, Miss.</p>
        </div>
      </div>
    </div>
  </div>
  </form>
</div>

​

如果有什么遗漏或需要补充的地方，请告诉我。谢谢

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

https://stackoverflow.com/questions/55232988

复制
相关文章
css 使元素居中
其他
<div style="text-align:center;">居中显示</div>
lin_zone
2018/08/15
2.4K0
css 使元素居中
求两列表之间相同与不同元素
pythonset
针对两列表找相同与不同元素问题，提出利用set()方法，通过Python输入代码实验，证明该方法是有效的，本文的方法只比较了两个列表之间的问题，未来希望能够实现更多列表同时求相同与不同元素。
算法与编程之美
2023/08/22
1550
求两列表之间相同与不同元素
怎样使元素可编辑
htmltcp/ipjava
作者：http://lucky.myrice.com E-mail:amxh@21cn.com
Java架构师必看
2021/03/22
3160
javascript 数组排序，找到相同元素[通俗易懂]
httpsjava网络安全编程算法
小白前端一个，公司项目，里面有一个数组增加，删除，去重，排序，找到相同元素个数等等…
全栈程序员站长
2022/08/14
1K0
根据某列相同元素求和
linuxunix
下面是一个需要计算相同基因的exon的长度的文件，即根据相同的基因，先计算基因的起点到终点的距离，再对相同的基因的的exon距离求和
生信编程日常
2020/06/11
1K0
根据某列相同元素求和
常见的块状元素与内联元素
编程算法html5
xHTML究竟有多少个标签？绝大部分人都不能得出一个正确的答案，现在就有个机会，自己数数。答案：91个，哈哈,被你找到了~
Twcat_tree
2022/11/30
5800
JS取两个数组相同的元素
数组
function arrayIntersection ( a, b ) { var ai=0, bi=0; var result = new Array(); while ( ai < a.length && bi < b.length ) { if ( a[ai] < b[bi] ) { ai++; } else if ( a[ai] > b[bi] ) { bi++; } else /* they're equal
用户7705674
2021/09/24
6.3K0
行内元素与块元素间的转换及行内块元素
htmlc++
在HTML中行内元素和块元素间的区分，本质上是其标签默认存在了一个 display 属性，当 display 属性的值为 block 那么所对应的标签即为块元素，反之当值为 inline 则标签为行内元素。
摸鱼的G
2023/02/22
1.2K0
行内元素与块元素间的转换及行内块元素
jQuery 隐藏具有指定class属性值的元素
jquery
代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>前端</title> <style> .antzone{ width:200px; height:100px; background:#ccc; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(func
IT工作者
2022/02/17
5.1K0
Selenium 元素checkbox元素操作与元素等待
android自动化测试网站selenium
检测百度页面搜索按钮是否存在，存在就输入关键词“自学网 Selenium” 然后点击搜索
清风穆云
2021/08/09
1.6K0
HTML中的内联元素与块级元素
c++htmlcss
文章作者：Tyan 博客：noahsnail.com  |  CSDN  |  简书
Tyan
2022/05/09
3.3K0
【前端】使用CSS使元素居中的几种方式
csscentertransformwebkit前端
zhaokang555
2023/10/17
2260
PHP分割两个数组的相同元素和不同元素的两种方法
其他
一、举例说明 例如有两个数组A和B（当然这个A和B也可以是key=>value形式） A = array('tt','cc','dd','mm') B = array('ad','tt','cc','qq') 希望得到的结果是： sameArr = array('tt','cc') A = array('dd','mm') B = array('ad','qq') 二、解决方案 2.1、方法一：for循环取出数据 1、for循环一个A数组； 2、使用array_search判断元素是否存在B数组中； 3
蛋未明
2018/06/07
2.3K0
list去除相同String、对象元素
string对象
一、当相同元素为String时 方法一 /** * List去重 */ private List<String> removeDuplicate(List<String> list) { LinkedHashSet<String> set = new LinkedHashSet<String>(list.size()); set.addAll(list); list.clear(); list.addAll(
崔笑颜
2020/06/08
8170
python删除序列相同的元素并保持原顺序
python
示例： 1 2 3 4 5 6 7 8 9 1、列表中有重复的元素 a = [1,5,2,1,9,1,5,10] 2、字典中有重复的键值对 a = [ {'x': 1,'y': 2}, {'x': 1,'y': 3}, {'x': 1,'y': 2}, {'x': 2,'y': 4} ] 针对这些，我们需要去重，并且还要保持原顺序不变，该如何操作呢？ 这里我们使用函数来解决。 1、列表去重 1 2 3 4 5 6 7 8 9
dogfei
2020/07/31
8240
LeetCode 2121. 相同元素的间隔之和（前缀和）
https网络安全编程算法
arr 中两个元素的 间隔 定义为它们下标之间的 绝对差 。更正式地，arr[i] 和 arr[j] 之间的间隔是 |i - j| 。
Michael阿明
2022/01/07
5920
iOS求两个数组里的相同元素
编程算法ios
这个比起直接遍历做得优一点的地方在于先把A数组中元素剔除出来（范围在B内），然后再进行遍历，这也得益于数组已经排好序。
清墨
2019/04/23
2.5K0
button元素的id与onclick的函数名字相同 导致方法失效的问题
编程算法
需求需要在原先页面添加一个按钮，触发一个function，如此简单的操作，却无意间发现了一个问题。(还是对html了解的太少)
陈灬大灬海
2019/01/28
1.7K0
button元素的id与onclick的函数名字相同 导致方法失效的问题
元素的显示与隐藏
displayhiddenoverflowscrollvisibility
在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。
星辰_大海
2020/09/30
4.4K0
2021-10-17 JS使模板元素进行移动（拖拽模板元素）
node.jshtml
原理很简单，就是将元素设置为绝对定位，然后监听鼠标按下（mousedown），移动事件(mousemove)，改变元素的top、left值就行。
无道
2021/10/19
2.5K0
2021-10-17 JS使模板元素进行移动（拖拽模板元素）

相似问题

如何使附加的元素具有与当前元素相同的功能

13

如何使元素具有相同的"src“

116

如何使元素具有相同的高度

31

使子元素具有与父元素相同的宽度和边框

14

无法使子元素与父元素IE具有相同的高度

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

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