使用 live() 添加类后 Jquery 可调整大小的问题

Question

单击创建的 div 时，ressized() 不再起作用。我所做的就是用 live() 添加一个类。这个问题有什么办法解决呢。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all" /> 
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script> 

<style>
    .aaa { width:100px; height:100px;background-color:#ccc;margin-bottom:5px;}
    p{widht:500px; height:500px; margin:0px; padding:0px;border:2px solid red;color:#000;}
</style>


<button>Click to create divs</button>
<p id="ptest"></p>

<script type="text/javascript">
var dividcount = 1;

$("button").click(function() {
    var myDiv = $('<div id=lar' + dividcount + ' class=aaa></div>');
    $(myDiv).resizable().draggable().appendTo('#ptest');

    dividcount++;
});

$('div').live('click', function() {

    $('div').removeClass('selected');
    $('div').html('');

    $(this).addClass('selected');
    $(this).html('div #' + this.id);
});
</script>

Answer 1

这是因为：

$('div').html('');

您清除了 div 内的 HTML。当您调整大小时，jQuery UI 会添加一些它需要的内容。例如：

<div id="lar1" class="aaa ui-resizable ui-draggable" style="position: absolute; top: 38px; left: 12px; width: 125px; height: 120px; ">
  <div class="ui-resizable-handle ui-resizable-e"></div>
  <div class="ui-resizable-handle ui-resizable-s"></div>
  <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; "></div>
</div>

解决此问题的一种方法是将文本放入特定容器中并进行修改，例如：

    $('div').live('click', function() {

        $('div').removeClass('selected');
        $('div .my-text').remove();

        $(this).addClass('selected');
        $('<div class="my-text">div #' + this.id + '</div>').appendTo($(this));
    });