Bind event dynamically means to bind the event to new DOM element added from jQuery/JavaScript.

e.g.

1
2
3
4
<div id="btn-wrapper">
    <button type="button" id="btn-1">Button 1</button>
    <button type="button" id="btn-2">Button 2</button>
</div>
1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
    // only take effect on Button 1 & 2
    $('button').click(function() {
        alert($(this).text() + ' clicked');
    });

    // add 2 more buttons
    $('#btn-wrapper').append($('<button>').attr({ 'type': 'button', 'id': 'btn-3' }))
        .append($('<button>').attr({ 'type': 'button', 'id': 'btn-4' }));
});

For jQuery common event like click, we can use .on() to bind event dynamically.

e.g.

1
2
3
4
5
6
7
$(document).ready(function() {
    // only take effect on all buttons inside #btn-wrapper
    $('#btn-wrapper').on('click', 'button', function() {
        alert($(this).text() + ' clicked');
    });
    ...
});

Problem

For certain cases, example like jQuery UI sortable, we cannot use on.

After try & error, I get a solution which is external function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
    function reloadSortable() {
        $('.list-container').sortable({
            connectWith: 'ul',
            receive: function(e, ui) {
                alert('item received');
            },
            remove: function(e, ui) {
                alert('item removed');
            }
        });
    }

    // add 2 more buttons
    $('#container-wrapper').append($('<ul>').attr({ 'class': 'list-container' }));
    reloadSortable(); // call this after add new element(s)
});