JQuery привязка событий к нескольким экземплярам Textarea на странице

Question

У меня есть сценарий, работающий точно так, как мне нужно, только сейчас, я не могу его реплицировать на странице - jquery принимает текстовые поля и редактирует их на основе кнопок но мне нужно, чтобы каждый текстовый ящик имел собственный набор кнопок. Вот мой код:

HTML КОД:

<textarea style="width:500px; height: 150px;" id="text">This is some text</textarea> 
<br /> 
<input type="button" value="Click Me" id="button" /> 
<input type="button" value="Click Me 2" id="button2" /> 

<br /><br /> 

<textarea style="width:500px; height: 150px;" id="text">This is some text</textarea> 
<br /> 
<input type="button" value="Click Me" id="button" /> 
<input type="button" value="Click Me 2" id="button2" /> 

JAVASCRIPT:

function insertText(text) { 
    var $textbox = $("#text"); 
    var textStr = $textbox.text(); 
    var startPos = $textbox[0].selectionStart; 
    var endPos = $textbox[0].selectionEnd; 

    // If set to true, the selection will NOT be replaced. 
    // Instead, the text will be inserted before the first highlighted character. 
    if (false) 
    { 
     endPost = startPos; 
    } 

    var beforeStr = textStr.substr(0, startPos); 
    var afterStr = textStr.substr(endPos, textStr.length); 

    textStr = beforeStr + text + afterStr; 
    $textbox.text(textStr); 
    return textStr; 
} 

$(function() { 
    $('#button').on('click', function() { 
     insertText("\n\nafter clicking");  
    }); 
    $('#button2').on('click', function() { 
     insertText("\n\nafter clicking 2");  
    }); 
}); 

JS Fiddle:https://jsfiddle.net/0hmdu0ox/

Answer 1

Вы можете попробовать эту версию:

<textarea style="width:500px; height: 150px;" id="txt1">This is some text</textarea> 
<br /> 
<input type="button" value="Click Me" onclick="insertText('\n message1', 'txt1');" /> 
<input type="button" value="Click Me 2" onclick="insertText('\n message2', 'txt1');" /> 

<br /><br /> 

<textarea style="width:500px; height: 150px;" id="txt2"> This is some text</textarea> 
<br /> 
<input type="button" value="Click Me" onclick="insertText('\n message1', 'txt2');" /> 
<input type="button" value="Click Me 2" onclick="insertText('\n message2', 'txt2');" /> 

использовать только эту функцию:

function insertText(mess, txtA) { 
    var textbox = $('#'+txtA); 

    var textStr = textbox.text(); 
    var startPos = textbox[0].selectionStart; 
    var endPos = textbox[0].selectionEnd; 

    if (false) { 
     endPost = startPos; 
    } 

    var beforeStr = textStr.substr(0, startPos); 
    var afterStr = textStr.substr(endPos, textStr.length); 

    textStr = beforeStr + mess + afterStr; 
    textbox.text(textStr); 
    return textStr; 
} 

Мишени для оптимизации:

если вы можете получить в ближайшее текстовое поле в InsertText функции , что будет большой ... тогда вам не нужен id для textarea, и вам не нужно указывать id в парном ameters, вы тогда будете в состоянии сделать что-то вроде этого:

<textarea style="width:500px; height: 150px;"> This is some text</textarea> 
<br /> 
<input type="button" value="Click Me" onclick="insertText('\n message1', this);" /> 
<input type="button" value="Click Me 2" onclick="insertText('\n message2', this);" /> 

И в функции что-то вроде этого:

function insertText(mess, btn) { 
    var textbox = $(btn).prev('textarea'); 
    .... 

Надеется, что это поможет вам найти лучшее решение :)