JQuery draggable and Javascript stop working after ajax call

Question

I have an on click declared like so:

 $('body').on('click', 'input#searchVariables', function () {

      var datasetId = $('.TSDatasetID').val();
        var term = $('#searchTextbox').val();
        alert(term);

        $.ajax({
            type: "GET",
            url: "trendssearchresults.aspx?datasetId=" + datasetId + "&term=" + term,
            error: function (xhr, status, error) {

                //alert the error if needed
                alert('Error: ' + xhr.responseText);
            },
            success: function (responseData) {

                $('#searcharea').html(responseData);
                $('#searcharea').show();
            }
        });
 });

It returns the data fine, but my onclick events in that code don't work.

After my ajax inputs the html to my page, none of the javascript works. How do I fix this?

Draggable code:

 $(document).ready(function () {
    $(".draggableVar").draggable({ revert: false, helper: 'clone', scroll: true, appendTo: 'body', start: function () {
        $(this).data("startingScrollTop", $(this).parent().scrollTop());
    },
        drag: function (event, ui) {
            var st = parseInt($(this).data("startingScrollTop"));
            ui.position.top -= $(document).scrollTop() - st;
        }
    });

Answer 1

You need to rebind your dom elements with $.draggable after appending them to dom. ajax is async and append the elements after your initial draggable call.

function bindDraggables(outer) {
    outer.find(".draggableVar").draggable({ revert: false, helper: 'clone', scroll: true, appendTo: 'body', start: function () {
        $(this).data("startingScrollTop", $(this).parent().scrollTop());
    },
        drag: function (event, ui) {
            var st = parseInt($(this).data("startingScrollTop"));
            ui.position.top -= $(document).scrollTop() - st;
        }
    });
}


$('body').on('click', 'input#searchVariables', function () {

      var datasetId = $('.TSDatasetID').val();
        var term = $('#searchTextbox').val();
        alert(term);

        $.ajax({
            type: "GET",
            url: "trendssearchresults.aspx?datasetId=" + datasetId + "&term=" + term,
            error: function (xhr, status, error) {

                //alert the error if needed
                alert('Error: ' + xhr.responseText);
            },
            success: function (responseData) {
                var appendableElement = $('#searcharea');
                appendableElement.html(responseData);
                appendableElement.show();
                bindDraggables(appendableElement);
            }
        });
 });

Answer 2

Try this:

$(document).ready(function () {
      //On Dom ready load your draggable if you need to:
      loadjs();
     $('body').on('click', 'input#searchVariables', function () {

          var datasetId = $('.TSDatasetID').val();
            var term = $('#searchTextbox').val();
            alert(term);

            $.ajax({
                type: "GET",
                url: "trendssearchresults.aspx?datasetId=" + datasetId + "&term=" + term,
                error: function (xhr, status, error) {

                    //alert the error if needed
                    alert('Error: ' + xhr.responseText);
                },
                success: function (responseData) {

                    $('#searcharea').html(responseData);
                    $('#searcharea').show();
                    loadjs(responseData);
                }
            });
     });
});

Rebind your draggable :

function loadjs(responseData) {
  $(".draggableVar").draggable({ revert: false, helper: 'clone', scroll: true, appendTo: 'body', start: function () {
        $(this).data("startingScrollTop", $(this).parent().scrollTop());
    },
        drag: function (event, ui) {
            var st = parseInt($(this).data("startingScrollTop"));
            ui.position.top -= $(document).scrollTop() - st;
        }
}