[英]jquery copy a html element to a string
如何正确地将 html 元素复制到字符串。 我使用metroui,版本4。他们有一个特殊的输入class,其中一个X弹出点击你可以删除你在输入中输入的值。 https://metroui.org.ua/input.html
当我将 html 元素复制到 var 时,这个 X 什么都不做,但是当我用字符串和 append 定义一个 var 时,它可以工作。 当我用元素 id 获取它时,已经从 Metro js 注入了 javascript 代码,因为我使用这个 data-role="input",然后 metroui js 做一些事情。 如何获得与 var div 相同的字符串? 像它在编辑器中显示的纯 html? 或者这不可能,因为 jquery 只能读取 dom? 这样我就可以阅读这个纯 html
<span id="section-one-a1">
<div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>
<input value="val1" id="val1" type="text" data-role="input" />
</span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
<script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#addScnt').on('click', function() {
var div = $('<span id="section-one-a1">'+
'<div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>'+
'<input value="val1" id="val1" type="text" data-role="input" />'+
'</span>');
//console.log(div);
var newdiv = $('#section-one-a1').prop('outerHTML').replace(/(\r\n|\n|\r|\t)/gm,"");
console.log(newdiv)
var test = $(newdiv);
$(div.appendTo("#p_scents"));
return false;
});
});
</script>
</head>
<body id="main">
<ul id="test">
<li>
<a href="#" id="addScnt">new</a>
</li>
</ul>
<div id="p_scents">
<span id="section-one-a1">
<div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>
<input value="val1" id="val1" type="text" data-role="input" />
</span>
</div>
</body>
</html>
我是这样做的,不,也许不是很好,但是可以。 在输入 data-role 时,删除 MetroUI JS 在 html 中注入的元素和属性,然后它就可以工作了。 当它通过 appendto 进入 dom 时,metroui JS 注入了新的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
<script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#addScnt').on('click', function() {
var div1 = $('<span id="section-one-a1">'+
'<div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>'+
'<input value="val1" id="val1" type="text" data-role="input" />'+
'</span>');
//console.log(div);
var newdiv = $('#section-one-a1').clone().html().replace(/(\r\n|\n|\r|\t)/gm,""); // string
var replace = newdiv.replace('<div class="input">',''); // replace input
replace = replace.replace('data-role-input="true"',''); // replace data-role-input
replace = '<span id="section-one-a1">'+replace+'</span>';
var div = $(replace); // to object
div.find(".button-group").remove(); // remove button-group
//console.log(test)
$(div.appendTo("#p_scents"));
return false;
});
});
</script>
</head>
<body id="main">
<ul id="test">
<li>
<a href="#" id="addScnt">new</a>
</li>
</ul>
<div id="p_scents">
<span id="section-one-a1">
<div class="p_scnt" id="p_scnt" name="p_scnt">Test 1</div>
<input value="val1" id="val1" type="text" data-role="input" />
</span>
</div>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.