jquery draggable does not worked_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-18 21:04 出处：网络

I am doing the jquery draggable it work fine in the initial case but it does not work when a new same div is created with jswhat is the actual problem with my code please help me

相关专题：jquery

I am doing the jquery draggable it work fine in the initial case but it does not work when a new same div is created with jswhat is the actual problem with my code please help me http://galtech.org/testing/drag_new.php Drag me old worked fine But new draggable div is created with New element (red anchor in bottom ) it does not have draggable property

 <script>
  function shw()
  {
    $("#name").html('<div id="dra开发者_C百科ggable">Drag me new</div>');
  }
  $(document).ready(function() {

     $( "#draggable" ).draggable({ cursor: 'move', containment: '#name', opacity: 0.35 }); 
  });
  </script>
</head>
<body >
  <div id="name" style="background:#9999FF; height:500px; width:500px;"> 
<div id="draggable">Drag me old</div>
</div>
<a onClick="shw();" style="background-color:#FF0000; cursor:pointer;">New element</a>


</body>
</html>

You have to re-initialize the draggable. Make what's in document.ready a function and call it after you add the new draggable

You're adding an element to the dom that wasn't present at its initialization.

If you want to use a function on a element created in the future, you can use the live function from jQuery

Source

Edit : Since live can't work here, there's an plugin I used once that work here : liveQuery

Here's the jsFiddle with livequery that work with your code

<script>

function shw()   {
   $("#name").html('<div id="draggable">Drag me new</div>');
}

$(document).ready(function() {

$( "#draggable" ).draggable({ cursor: 'move', containment:

'#name',opacity: 0.35});

});

</script>

Initialize draggable after adding new elements

function shw()   {
   $("#name").html('<div id="draggable">Drag me new</div>')
.find('#draggable').draggable({ cursor: 'move', containment:'#name',opacity: 0.35});
}

$(document).ready(function() {

$( "#draggable" ).draggable({ cursor: 'move', containment:'#name',opacity: 0.35});

});