模拟点击事件动态增删元素

<tr>
    <td align="right">商品图像</td>
    <td>
        <a href="javascript:void(0)" id="selectFileBtn">添加附件</a>
        <div id="attachList" class="clear"></div>
    </td>
</tr>

<script type="text/javascript">
	$("#selectFileBtn").click(function(event) {
		$fileFiled=$('<input type="file" name="thumbs[]"/>' );
		$fileFiled.hide();
		$("#attachList").append($fileFiled);
		$fileFiled.change(function(event) {
			//console.log("change");
			$path=$(this).val();	
			$filename=$path.substring($path.lastIndexOf("\\")+1);
			if($path!=""){
			$attachItem=$('<div class="attachItem"><div class="left">a.gif</div><a href="javascript:void(0)" title="删除附件">删除</a></div>');
			$attachItem.find(".left").html($filename);
			$("#attachList").append($attachItem);
			$a=$("#attachList>.attachItem").find("a");
			//console.log("第二次算a数量为:"+$a.length);
			$a.click(function(){
			    //console.log("触发了click事件");
			    $(this).parents('.attachItem').prev('input').remove();
				$(this).parents('.attachItem').remove();
				})
			}
		});
		//注意,trigger()写在change后面,否则有些浏览器会出现问题
		$fileFiled.trigger('click');
		//$fileFiled.trigger('change');  //egde 浏览器不写这句不能显示?!
		$a=$("#attachList>.attachItem").find("a");
		if($a.length==0){
			//console.log("a数量为零,再次手动触发change事件");
			$fileFiled.trigger('change');
		}	
		//event.stopPropagation();
	});

</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用Mock.js来模拟后端的增删改查操作。Mock.js是一个用于生成随机数据的库,可以模拟后端接口返回的数据。 下面是一个简单的示例,演示如何使用Mock.js模拟后端的增删改查操作: ```javascript // 引入Mock.js const Mock = require('mockjs'); // 使用Mock.js模拟数据 // 模拟查询操作 Mock.mock('/api/users', 'get', { 'list|10': [{ 'id|+1': 1, 'name': '@cname', 'age|18-60': 1, 'gender|1': ['男', '女'], 'email': '@email', 'phone': /^1[3456789]\d{9}$/, 'address': '@county(true)', 'create_time': '@datetime' }] }); // 模拟新增操作 Mock.mock('/api/users', 'post', { 'id|+1': 11, 'name': '@cname', 'age|18-60': 1, 'gender|1': ['男', '女'], 'email': '@email', 'phone': /^1[3456789]\d{9}$/, 'address': '@county(true)', 'create_time': '@datetime' }); // 模拟修改操作 Mock.mock('/api/users/1', 'put', { 'id': 1, 'name': '@cname', 'age|18-60': 1, 'gender|1': ['男', '女'], 'email': '@email', 'phone': /^1[3456789]\d{9}$/, 'address': '@county(true)', 'create_time': '@datetime' }); // 模拟删除操作 Mock.mock('/api/users/1', 'delete', { 'code': 200, 'message': '删除成功' }); ``` 在上述示例中,我们使用Mock.mock()方法来定义接口的URL和请求方法,并指定返回的数据格式。通过这种方式,可以模拟后端的增删改查操作。 请注意,这只是一个简单的示例,实际应用中可能需要更复杂的数据模拟和接口定义。你可以根据自己的需求,使用Mock.js来模拟各种类型的后端接口操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值