Вызывать функцию для нескольких элементов

[krasovsky]

Добрый день!!
Не могу допереть,буду очень благодарен за совет,направление!
Это небольшой код для простоты:
две условных кнопки btn - каждая из них добавляет рядом с собой span-кнопку(cll), по которой в исходный btn добавляется текст "test"

<br><span class="btn">btn1</span>
<br><span class="btn">btn2</span>

пишем плагин

$.fn.btn = function(){
	var th = this; //ссылка на btn вызвавший ф-ю
		th.click(function() {
	console.log(this.tagName +' '+ this.id); //Id - пусто?

			$('<span class="cll">123</span>').insertAfter(this);
			
			$('.cll').live('click',function() {
				th.append('test'); //текст который вставляется в th
			});
});			
		
};


$('.btn').hover(function() {
 $(this).btn(); //вызов
});

так вот проблема в том что если вызвать метод $.fn.btn на обоих кнопках,то текст уже вставляется сразу в два btn, а должен только в один.
Задача стоит-при наведении мышкой (или клике) вызвать "панель инструментов"(cll) и по клику на элемент панели вставить в поле(btn).
подскажите как правильно навесить свой метод!

[Hoshinokoe]

krasovsky,

Вместо $('.cll') поставь th.next('.cll'). Ниже полный код:

$.fn.btn = function () {
    var th = this; //ссылка на btn вызвавший ф-ю
    th.click(function () {
        $('<span class="cll" style="color: red;">123</span>').insertAfter(this);

        th.next('.cll').click(function () { // элемент уже создан, можно и без live обойтись
            th.append('test'); //текст который вставляется в th
        });
    });
};

$('.btn').hover(function () {
    $(this).btn(); //!!! добавляет обработчик каждый раз
                    //т.е. если наведем 10 раз на кнопку, а потом клинем - то он вызовется 10 раз 
});

[krasovsky]

krasovsky,

Спасибо за ответ!Работает!
Хотя проблему не совсем решило..дело в том что ('.cll') скорее всего будет один на странице, с display:none.
Я переписал немного код:

$('<span class="cll" style="color: red;">123</span>').insertAfter('body');
//Допустим что он у нас уже добавлен в html где то с position:absolute

$.fn.btn = function () {
    var th = this; //ссылка на btn вызвавший ф-ю
    th.click(function () {
       
        $('.cll').click(function () { // некст уже не помогает вот тут и основная проблема, как привязать ссылку th к cll? Как использовать поиск?
            th.append('test'); 
        });
    });
};

$('.btn').one(function () {
    $(this).btn(); //чтоб вызывался 1 раз.
                     
});

Заранее спасибо!

[ОлегА]

вообще то this надо было обернуть в $(this), не?

$('<span class="cll" style="color: red;">123</span>').insertAfter('body');
//Допустим что он у нас уже добавлен в html где то с position:absolute

$.fn.btn = function () {
    var th = $(this); //ссылка на btn вызвавший ф-ю
    th.click(function () {
       
        $('.cll').click(function () { // некст уже не помогает вот тут и основная проблема, как привязать ссылку th к cll? Как использовать поиск?
            th.append('test'); 
        });
    });
};

$('.btn').one(function () {
    $(this).btn(); //чтоб вызывался 1 раз.
                     
});

[krasovsky]

В строке 15 уже обернуто.

[Hoshinokoe]

krasovsky,
Опиши полную картину того, что тебе нужно. Ибо начинается какое-то костыляние непонятно чего.

[krasovsky]

Hoshinokoe,
Ну грубо говоря тут имитируется тулпанель, которая прописана в коде html.('.cll')
При наведении на блок с классом ('.btn') она всплывает и нажимая на ней кнопки (в данный момент нажимая на нее саму) в этот .btn должен вставляться текст ('test'). А так как btn-ов несколько этот текс не должен вставляться в них во все, а только в тот на котором всплыла тулпанель