jquery - Jquery .load / .resizable 不起作用

Question

为什么调整大小在这个函数中起作用，而在下面的函数中不起作用。这对我来说很重要，因为每次点击 id #test 的 div 时，我都希望检索数据，而不仅仅是在开始时检索一次（工作示例）。

谢谢。

作品

$(document).ready( function() {
  $("#tc").load("berichten.php");
  $("#tc").draggable();
  $("#test").click( function(){
    $("#tc").toggle(); //.css("display","inline-block");
    $("#tc").resizable();
  });
});

不工作！：

$(document).ready(function() {
  $("#tc").draggable();
  $("#test").click(function(){
    $("#tc").load("berichten.php");
    $("#tc").toggle(); //.css("display","inline-block");
    $("#tc").resizable();
  });
});

Answer 1

$("#tc").load("berichten.php", function(){
    $("#tc").toggle(); //.css("display","inline-block");
    $("#tc").resizable();
});

.load()仅在请求完成后才响应的回调函数。

Answer 2

我唯一能想到的是单击链接的默认操作会取消加载。尝试：

$("#test").click( function( e ) {
  e.preventDefault();
  $("#tc").load("berichten.php");
  $("#tc").toggle(); //.css("display","inline-block");
  $("#tc").resizable();
});

Answer 3

尝试：

$(document).ready(function() {
  $("#tc").draggable();
  $(document).on("click","#test",function(){
    $("#tc").load("berichten.php");
    $("#tc").toggle(); //.css("display","inline-block");
    $("#tc").resizable();
  });
});

Answer 4

尝试使用AJAX这样的加载数据：

$(document).ready(function() {
    var el = $('#tc');
    el.draggable();
    var AjaxRequest = null;
    $("#test").click(function() {
        if (AjaxRequest !== null) {
            AjaxRequest.abort();
        }
        AjaxRequest = $.get('berichten.php', function(data) {
            el.html(data);
            el.toggle(); //.css("display","inline-block");
            el.resizable();
        });
    });
});