Draggable not working after append

Question

Im having trouble making my buttons draggable after an append() through an ajax call.

Does anyone see an obvious error? Thanks!

$(document).ready(function () {
    $("#exAutoTxt").keypress(function () {
        $.ajax({
            url: '@Url.Action("exerciseAutocomplete")',
            dataType: "json",
            data: {
                'term': $("#exAutoTxt").val()
            },
            dataType: "text",
            success: function (data) {
                var exArray = JSON.parse(data);
                $(".exResults").html("");
                for (var x = 0; x < exArray.length ; x++) {
                    $(".exResults").append("<button class='exNameBtn btn'>" + exArray[x] + "</button> <br/> <br/>");
                }


                $('.exNameBtn').draggable();

            }
        });
    })
});

Answer 1

Buttons fire a request on click by default. you need to disable this with cancel: false to enable dragging:

$('.exNameBtn').draggable({cancel: false;});