JSFiddle - React, Tailwind, and code Playground

by sedran

HTML

<button id="bindAListener">Bind Specific Function</button>
<button id="unbindAListener">Unbind Specific Function</button>
<p>
    <button id="doit">Do It, Click Me</button>
</p>

<p>
    <textarea disabled="disabled" rows="10" cols="35"></textarea>
</p>

JavaScript

$(document).ready(function() {
    // Bu fonksiyon textarea'nın içeriğini temizler
    function clearTextarea() {
        $("textarea").val("");
    }
    
    // Bu fonksiyon textarea objesine metin ekler
    function append(str) {
        $("textarea").val($("textarea").val() + str);
    }
    
    // Bu fonksiyon textarea içerisine Ahmet yazar
    function writeAhmet() {
       append("Ahmet\n");
    }
    
    // Bu fonksiyon textarea içerisine Mehmet yazar
    function writeMehmet() {
        append("Mehmet\n");
    }
    
    // Bu fonksiyon textarea içerisine Serdar yazar
    function writeSerdar() {
        append("Serdar\n");
    }
    
    // doit butonuna tıklayınca her zaman
    // clearTextarea, writeMehmet, ve writeAhmet
    // fonksiyonları çağırılacak.
    $("#doit").bind('click', clearTextarea);
    $("#doit").bind('click', writeMehmet);
    $("#doit").bind('click', writeAhmet);
    
    // Bind Specific Listener butonuna tıklandıktan sonra
    // doit butonu aynı zamanda writeSerdar
    // fonksiyonunu da tetikleyecek.
    $("#bindAListener").bind('click', function () {
        $("#doit").bind('click', writeSerdar);
    });
    
    // Unbind Specific Function butonuna tıklandıktan sonra
    // doit butonu writeSerdar fonksiyonunu çağırmayı bırakacak
    // Fakat diğer fonksiyonları çağırmaya devam edecek
    $("#unbindAListener").bind('click', function () {
        $("#doit").unbind('click', writeSerdar);
    });
});