JS/JQ控制操作由JS/JQ创建生成的元素

Zero零分 笔记 3,206 0 2年前

在JQ/JS操作由JQ/JS创建的元素时,需要将操作function放入JS创建元素里面,如放在外面,可能无法操作,由于浏览器从上而下加载代码,在操作创建元素之前,该元素并不存在,而操作JS已经存在,将导致无法找到元素!

放入创建元素之内,在创建元素之后创建操作代码,即可找到创建的元素!

举个例子:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>JS/JQ控制操作由JS/JQ创建生成的元素</title>
<script type="text/javascript" src="https://blog.32xp.com/wp-content/themes/Eson.X.Blog.V1.1.0/img/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="text">点击创建内容</div>
<div id="show"></div>
<script type="text/javascript">
$("#text").click(function(){
$("#show").html('<div id="a" style="padding:50px;">点击我将消失</div>');
});
$("#a").click(function(){
$("#a").remove();
});
</script>
</body>
</html>

以上这段代码,点击消失无效(无法移除#a的DIV)

正确代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>JS/JQ控制操作由JS/JQ创建生成的元素</title>
<script type="text/javascript" src="https://blog.32xp.com/wp-content/themes/Eson.X.Blog.V1.1.0/img/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="text">点击创建内容</div>
<div id="show"></div>
<script type="text/javascript">
$("#text").click(function(){
$("#show").html('<div id="a" style="padding:50px;">点击我将消失</div>');
$("#a").click(function(){
$("#a").remove();
});
});

</script>
</body>
</html>

可以点击消失(可以移除#a的DIV)

在线运行代码测试:在线运行工具

发布:2019-03-25 21:25:58
标签:
链接:https://blog.32xp.com/jq-js-do.html
END

JS+html点击运行文本框内代码

代码类,代码演示类,代码修改等处使用,通过JS+Html表单输入框实现“点击运行”在浏览器中查看文本框内的代码运行效果。 JS代码: function RunCode(txt) { cod=document.all(txt) var code=cod.value; if (code!=“”){ var newwin=window.open(”,”,”); //打开一个窗口并赋给变量newwin。 newwin.opener = null // 防止代码对论谈页面修改 newwin.document.write(code); //向这个打开的窗口中写入代码code,这样就实现了运行代码功能。 newwin.document.close(); }else{ alert(“亲,对不起,您是要我运行什么啊!”); //空值时弹出 } } HTML代码:由一个文本框和一个点击完成 <textarea style=“width:990px;height:200px;margin:10px 0px 10px 10px;” id=“code”> </textarea >             <div class=“run” onclick=“RunCode(‘code’)”>点击运行-查看效果</div> 点击之后就可以在浏览器中看待文本框内的效果! 演示:https://blog.32xp.com/tool/runhtml
代码 ·

JS逐条向上滚动代码

JS逐条向上滚动代码,这种效果,或许现在都很少用到了。原理是复制层向上滚动。 CSS: .box{font-size:14px;text-align:left;overflow:hidden;height:30px;line-height:30px;width:200px;border:1px solid #e4e4e4;} .box ul{margin:0px;overflow:hidden;width:300px;} .box li{ list-style-type:none; } .box a{height:30px;width:350px;line-height:30px;overflow:hidden;} HTML: <div class=“box” id=“marqueebox”> <ul> <li><a href=“//www.32xp.com” target=“_blank”>第一条</a></li> <li><a href=“//www.32xp.com” target=“_blank”>第二条</a></li> <li><a href=“//www.32xp.com” target=“_blank”>第三条</a></li> <li><a href=“//www.32xp.com” target=“_blank”>第四条</a></li> </ul> </div> JS: <script type=“text/javascript”> function startmarquee(lh,speed,delay,index){ var t; var p=false; var o=document.getElementById(“marqueebox”); o.innerHTML+=o.innerHTML; o.onmouseover=function(){p=true} o.onmouseout=function(){p=false} o.scrollTop = 0; function start(){ t=setInterval(scrolling,speed); if(!p){ o.scrollTop += 1;} } function scrolling(){ if(o.scrollTop%lh!=0){ o.scrollTop += 1; if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0; }else{ clearInterval(t); setTimeout(start,delay); } } setTimeout(start,delay); } startmarquee(30,30,3000,0); </script> 演示://2.jspintu.sinaapp.com/dome/jsup.html    
代码 ·

phpstudy phpmyadmin访问慢的问题解决方案

本地配置phpStudy环境phpMyAdmin运行速度慢,phpstudy phpmyadmin访问慢的问题解决方案 在phpmyadmin目录下\phpStudy\PHPTutorial\WWW\phpMyAdmin\libraries找到config.default.php 打开config.default.php搜索host或者localhost或者$cfg[‘Servers’][$i][‘host’] 将:$cfg['Servers'][$i]['host'] = 'localhost'; 修改位:$cfg['Servers'][$i]['host'] = '127.0.0.1'; 另外,顺便将程序链接数据库的localhost改为127.0.0.1将会提高程序的运行速度
笔记 ·

php foreach 循环跳过和退出

php foreach循环,当遇到某个条件跳过continue,和退出break。 continue,跳过,例 $array=array(1,2,3,4,5,6,7,8,9,10); foreach($array as $a){ if($a==5){ continue;//跳过 } echo $a."<br>------------------<br>"; } 当$a=5的时候,不输出,跳过,后面继续输出 结果: 1 ------------------ 2 ------------------ 3 ------------------ 4 ------------------ 6 ------------------ 7 ------------------ 8 ------------------ 9 ------------------ 10 ------------------ 当$a=5的时候终止循环,后面不再输出,如: foreach($array as $a){ if($a==5){ break;//退出循环 } echo $a."<br>------------------<br>"; } 结果: 1 ------------------ 2 ------------------ 3 ------------------ 4 ------------------ 一般应该是continue跳过用于过滤,break用于查找!
笔记 ·

PHP下载远程图片到本地服务器

最近在写一个东西,需要将远程的图片下载保存到本地服务器,测试了一段代码,已通过 function download($url, $save_dir = './______Images/upload/goods/',$filename=''){ $ext=strrchr($url,'.'); if(trim($save_dir)=='') $save_dir='./'; if(trim($filename)==''){//保存文件名 $allowExt = array('gif', 'jpg', 'jpeg', 'png', 'bmp'); if(!in_array($ext,$allowExt)) return false; // return array('file_name'=>'','save_path'=>'','error'=>3); $filename=time().$ext; } if(0!==strrpos($save_dir,'/')) $save_dir.='/'; //创建保存目录 if(!file_exists($save_dir)&&!mkdir($save_dir,0777,true)) return false; // return array('file_name'=>'','save_path'=>'','error'=>5); $ch = curl_init(); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 信任任何证书 curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30); $file = curl_exec($ch); curl_close($ch); $filename = $filename.$ext; $resource = fopen($save_dir . $filename, 'a'); fwrite($resource, $file); fclose($resource); unset($file,$url); return true; // return array('file_name'=>$filename,'save_path'=>$save_dir.$filename,'error'=>0); } 因为要先判断是否下载成功,return 都改成了false和true,可以自行设置路径及文件名
笔记 ·
Zero零分
站龄14年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
464
文章
35
评论
27
分类
819
标签
7
友链
onlinelovesky 317355746 122551965@qq.com

百度广告