Question

我点击声明如下：

 $('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();
            }
        });
 });

它可以很好地返回数据，但是该代码中的onclick事件不起作用。

在我的ajax将html输入到我的页面之后，没有任何一个javascript工作。我该如何解决这个问题？

可拖动代码：

 $(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

你需要在将它们附加到dom之后用$ .draggable重新绑定你的dom元素。 ajax是异步的，并在初始可拖动调用之后附加元素。

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

试试这个：

$(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);
                }
            });
     });
});

重新绑定你的拖鞋：

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;
        }
}

JQuery draggable和Javascript在ajax调用后停止工作

2 个答案:

重新绑定你的拖鞋：