jquery draggable does not worked
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});
});
加载中,请稍侯......
精彩评论