JSFiddle - React, Tailwind, and code Playground

by hinablue

HTML

<div id="container">
    There is the jQuery 1.6.x test.<br /><br />
    <button type="button" class="my-button">Click me twice.</button><br />
    <button type="button" id="my-button2">Click me twice part 2.</button><br />
    <a href="#" id="a_link">This is a link, use .bind.</a><br />
    <a href="#" id="a_link_2">This is a link, use .click.</a><br />
    <a href="#" id="a_link_3">This is a link, use .delegate with ID.</a><br />
    <a href="#" class="a_link_4">This is a link, use .delegate with class name.</a><br />
</div>

JavaScript

function undelegate_test() {
    $('#container')
        .undelegate(".my-button")
        .delegate(".my-button", "click", 
                  $.proxy(function() {
                      alert('This message will show what you click times plus 2n+1.');
                      undelegate_test();
                  }));
    $('#container')
        .undelegate("#my-button2")
        .delegate("#my-button2", "click", 
                  $.proxy(function() {
                      alert('This message will show once.');
                      undelegate_test();
                  }));
    $('#container')
        .undelegate('.a_link_4')
        .delegate('.a_link_4', 'click',
                  $.proxy(function() {
                      alert('I\'m a link.');
                      undelegate_test();
                      return false;
                  }));
}

undelegate_test();

$('#a_link').bind('click', function(event) {
    event.preventDefault();
    alert('I\'m a link.');
}, false);
$('#a_link_2').click(function(event) {
    event.preventDefault();
    alert('I\'m a link.');
});
$('#container').delegate('#a_link_3', 'click', function(event) {
    event.preventDefault();
    alert('I\'m a link.');
});