У меня есть сценарий, который, когда пользователь выбирает категорию, он загружает содержимое в div
. У меня также есть скрипт, который, если вы нажмете тег pre
, выделит и скопирует текст. Дело в том, что не работает, когда контент был загружен, кстати, извините за мой английский вот пример и вот мой код
$(document).ready(function() {
$("#esto").on("change", function() {
var vale = this.value
$("#divcontent").load("http://letraspiolas.com/" + vale + ".html");
});
});
(function() {
function selectText(a) {
var b = document,
text = a,
range, selection;
if (b.body.createTextRange) {
range = b.body.createTextRange();
range.moveToElementText(text);
range.select()
} else if (window.getSelection) {
selection = window.getSelection();
range = b.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range)
}
}
preTags = document.getElementsByTagName("pre");
for (var i = 0; i < preTags.length; i++) {
preTags[i].onclick = function() {
selectText(this);
document.execCommand("copy")
}
}
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<select id="esto" data-placeholder="select a category...">
<option value="">select</option>
<option value="test"> test </option>
<option value="test1">test1</option></select>
<div id="divcontent">
<pre>this text can be select and copy</pre>
</div>
</body>
Это содержимое test.html :
<h3>title</h3>
<div class="kghjghjg">
<pre>____i want to select this</pre>
<pre>_____and this</pre>
<div class="clear"></div>
</div>
2 ответа
Хорошо, я понял, попробуйте что-то вроде:
<script type="text/javascript">
$(document).ready( function(){
// load event
$("#esto").on("change", function(){
var vale = $(this).val();
$( "#divcontent" ).load("http://letraspiolas.com/"+vale+".html", function() {
console( "Loaded." );
});
});
// event on pre tag
$("body").on("click","pre", function(){
selectText(this);
document.execCommand("copy")
});
});
function selectText(a){
var b=document,text=a,range,selection;
if(b.body.createTextRange){
range=b.body.createTextRange();
range.moveToElementText(text);
range.select()
}
else if(window.getSelection){
selection=window.getSelection();
range=b.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range)
}
}
</script>
Вы не можете использовать метод load()
для внешнего URL, который вы можете использовать load, если файлы .html
, .txt
находятся в одном домене. В этом случае вы должны использовать метод html()
.
$("#divcontent").html('<object data="http://letraspiolas.com/' + vale + '.html">').promise().done(function() {
console.log('Loaded');
initPreTags();
});
< Сильный > UPDATE : Если это не проблема, тогда вы можете использовать load()
, но вызывать функцию обратного вызова следующим образом:
$("#divcontent").load("http://letraspiolas.com/" + vale + ".html", initPreTags());
В этом случае initPreTags()
- это метод обратного вызова, который будет выполнен после загрузки содержимого.
Пожалуйста, посмотрите на ваш модифицированный код:
$(document).ready(function() {
$("#esto").on("change", function() {
var vale = this.value
$("#divcontent").load("http://letraspiolas.com/" + vale + ".html", initPreTags());
});
function initPreTags() {
console.log('Loaded');
var preTags = document.querySelectorAll('pre');
preTags.forEach(function(preTag){
preTag.addEventListener('click', function() {
selectText(this);
document.execCommand('copy');
});
});
}
function selectText(a) {
var b = document,
text = a,
range, selection;
if (b.body.createTextRange) {
range = b.body.createTextRange();
range.moveToElementText(text);
range.select()
} else if (window.getSelection) {
selection = window.getSelection();
range = b.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<select id="esto" data-placeholder="select a category...">
<option value="">select</option>
<option value="test"> test </option>
<option value="test1">test1</option></select>
<div id="divcontent">
<pre>this text can be select and copy</pre>
</div>
</body>
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.