Функции срабатывают по несколько раз
Подгружаю поле ввода по клике на ссылку.
$(div).load('pole.php'); если прописывать дополнительные функции в самом pole.php допустим if(event.keyCode == 13){ alert('Ураа'); } то функция повторяется столько же сколько будет и полей . а функции вне файла pole.php ни срабатывают. как поступить ? |
Samsam,
ставить обработку событий на то что присутствует всегда через $('...').on('click', 'input',) |
$( "textarea" ).keyup(function(event) {.. } - Такой вариант не пойдёт ? он будет выбирать все textarea ?
|
а вообще нормально что коде будет дублироваться несколько раз одна и та же функция но с разными $('...'). ?
|
Samsam,
:-?
$('body').on('keyup', 'textarea',function(event) {if(event.keyCode == 13){ alert('Ураа'); }})
|
Этот вариант не срабатывает.
Сейчас вот так $( ".textarea" ).on('keypress', function(event) { ... }); Подгруженные блоки $( ".textarea" ) не работают. Подскажите выход |
Samsam,
ставить обработчик на то что есть всегда (родителя и т.д. до window) $('body').on('keypress', '.textarea', function(event) { ... } или после создания элемента $(div).load('pole.php',function() { $( ".textarea" ).on('keypress', function(event) { ... });} ); |
Спасибо ! всё заработало. Ещё вопрос подскажите с фокусом.
$(div).html('длинный текст'); $(div).focus(); как сделать что бы фокус попадал в конец текста ? |
contenteditable курсор в конец текста
Samsam,
может есть другой способ
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var str = "длинный текст" , pos = str.length;
$("div").html(str);
var range = document.createRange();
range.setStart($("div")[0].childNodes[0], pos);
range.collapse(true);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
});
</script>
</head>
<body>
<div id="slider" contenteditable ></div>
</body>
</html>
|
Спасибо. А вообще будет ли замедляться работа сайта если вызов функций такого формата ( $('body').on('...', function(){...} ) будет очень много ?
|
Samsam,
нет, но лучше поискать ближайшего постоянного родителя, вместо 'body' |
Спасибо. Подскажите пожалуйста ещё один момент.
Как узнать элементы которые находятся в блоке. <div onclick=elem(this);> <img src=1.jpg> <i>текст</i> <b>текст 2</b> </div>
function elem(id) {
как узнать атрибуты элементов находящиеся в этом блоке
}
|
Samsam,
что должно быть на выходе? |
кажется разобрался .
$(div).find("img").attr('src') или $(div).find("i").text() Такой способ правильный ? |
Samsam,
да если img или i одни в div иначе нужно указать индекс через селектор или методы jquery, по умолчанию индекс ноль |
Ясно. Хотелось бы уточнить вопрос который я публиковал в другом посте. по поводу блока contenteditable.
как сделать так что бы что бы весь текст попадая в блок форматировался без html тегов. Но была возможность добавления смайликов. |
Samsam,
по input менять текст на смайлы и вырезать лишние теги по blur ... как-то так |
|
Сейчас почитаю. спс. И ещё если можно. Проблема с onclick в дочерних элементах.
<a href=# onclick=start() return false;> <div>1</div> <div>2</div> <div class=noactive>3</div> </a> function start() { alert('Ура'); .. как запретит срабатывание оnclick в блоке noactive ? } |
Samsam,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css"> a div.noactive{
background-color: rgba(211, 211, 211, 1);
}
a div{
background-color: rgba(238, 232, 170, 1);
height: 100px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("a").on("click", function(event) {
event.preventDefault();
if(!$(event.target).closest(".noactive").length) {alert('Ура');}
})
});
</script>
</head>
<body>
<a href=# >
<div>1</div>
<div>2</div>
<div class=noactive>3</div>
</a>
</body>
</html>
|
А что если у меня onclick повешан на саму ссылку <a href=# onclick=start()></a>
как тогда использовать это в функции function start() { ... } |
Samsam,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css"> a div.noactive{
background-color: rgba(211, 211, 211, 1);
}
a div{
background-color: rgba(238, 232, 170, 1);
height: 100px
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function st(event) {
event.preventDefault();
if(!$(event.target).closest(".noactive").length) {alert('Ура');}
};
</script>
</head>
<body>
<a href=# onclick="st(event)">
<div>1</div>
<div>2</div>
<div class=noactive>3</div>
</a>
</body>
</html>
|
спасибо! а можно было бы узнать event в самой функции не передавая её в onclick(event) а через $(this)...
|
Samsam,
можно не передавая, но только не в Mozilla Firefox |
Понятно. А по поводу вашего ответа в #18 посту. Такой же метод я и использую, но сталкиваюсь с проблемой что сам блок contenteditable становится уязвим к html тегам которые мне не нужны. мне нужно исключить все html теги, но при этом сделать возможным добавлять в блок определённые изображения смайликов.
P.S Это нужна для поля ввода комментарий на подобии вконтакте |
Samsam,
чем вас плагин не устроил? из поста №18? |
http://kwolfy.github.io/KEmoji/ - попробуйте перенести текст в поле. Он переносится вместе со стилими
|
$('body').on('mousemove', '.textarea', function(event) {
var a = $(this).text();
$(this).html(a);
});
можно так но тогда и смайлики не вставить. Как сделать исключение ? |
Samsam,
плагин давно не обновлялся, содержит ошибки. лучше поискать по новее. тема слишком тяжёлая, не могу помочь. |
Ясно. а вообще это скорее надо делать методом unwrap или replace ?
|
replace и replaceChild
|
а можно пример ? допустим как удалить теги <b>
|
А вообще как вы думаете заменять все теги кроме img с классом class=smile будет правильней либо запретить все теги кроме img с классом class=smile ?
|
Samsam,
можно заменять, как можно запретить для меня загадка. |
если можно приведите пример
|
Samsam,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('body').on('input', '.editor', function() {
this.innerHTML = this.innerHTML.replace(/<[^>]*?>/g , '')
})
});
</script>
</head>
<body>
<div class="editor" contenteditable>test</div>
</body>
</html>
|
|
Используя ваши подсказки сделал так .
('body').on('input', '.textarea', function() {
var msg = $(this).html();
//Ищи Img и меняю если это смайл
var a = msg.replace(/<img[^>]+>/g, function(i) {
var tag = i.match(/src="([^"]+)"/)[1];
if (tag == 'http://domen.ru/smiles/1.png') return ':)' ;
if (tag == 'http://domen.ru/smiles/2.png') return ':(' ;
......
else return '' ;
});
//Потом удаляю все теги
var b = a.replace(/<[^>]*?>/g , '');
//Обратно меняю символы на img через функцию
var d = vozvratIMG(b);
// И вывожу
$(this).html(d);
});
Насколько это правильно и годно не знаю но работает. Как вы думаете ? Проблема в данный момент с кареткой которая после каждого обновления $(this).html(d); становится в конец что приводит к проблеме если нудно изменить текст где то по середине. Подскажите как мне это решить ? |
Цитата:
медитировать можно на томже плагине, с курсором там вроде всё в порядке #L232 |
Цитата:
|
| Часовой пояс GMT +3, время: 06:54. |