Проблема изменения размера Jquery после добавления класса с помощью live () - PullRequest
Новая
       29

Проблема изменения размера Jquery после добавления класса с помощью live ()

0 голосов
/ 04 января 2011

resizable () больше не работает при нажатии на созданный div.Все, что я делаю, это добавление класса с помощью 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>

1 Ответ

2 голосов
/ 04 января 2011

Это из-за этого: 

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

Вы очищаете HTML внутри div. Когда вы делаете что-то изменяемого размера, 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));
    });
...