Question

单击创建的div时，

resizable（）不再有效。我正在做的是添加一个带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));
    });

使用live（）添加类后的Jquery Resizable问题

1 个答案: