jquery: binding not working after ajax loaded content? on not working -


i have loaded content via ajax, can't drop element on it. not think matter of dragging/dropping not working, because functioned before rebuild ajax.

i have searched , solutions "on", tried, can't working. tried "on mouseover" testalert, works, still impossible drop element. when using "drop" event, nothing jquery works anymore , accordion , tabs gone then. think must binding problem, can'tfind out how fix this.

jquery version: 1.11.3 jqueryui version: 1.11.4

<script>         $(function() {             $( "#left" ).accordion({heightstyle: "content"});             $( "#main" ).tabs({                 beforeload: function( event, ui ) {                     ui.jqxhr.fail(function() {                         ui.panel.html(                             "failed......" );                     });                 },                 heightstyle: "content"             });             $(".btn-start-new-form").click(function(){                 $.getjson("backend/newform.php", function(result){                     var theform = {formid:result}; // object, formitems must array because of order??                     $("#theform_tmp" ).replacewith( '<div class="placeholder">sleep een formulier item naar dit vak of klik op "klaar!</div><button id="addplaceholder">item toevoegen +</button>' );// ok                     $('#formitems').trigger('click');// ok                 }); // ok             });             $( ".draggable" ).draggable({                    cancel:false,                    appendto: "body",                    helper: "clone"}); // ok               $( ".placeholder" ).droppable({                 drop: function( event, ui ){                     var currentid = $(ui.draggable).attr('id');                     alert(currentid);                 }             }); //not working ajax app.              $('#theform').on('mouseover','.placeholder', function(){                 var currentid = $(ui.draggable).attr('id');                 alert(currentid); // var , alert not working                 alert("test");// works, when var/alert disabled, dropping stopped             });          });     </script> 

html part:

<div id=wrapper>         <div id="left" style="width:300px;float:left">             <h3>reset/nieuw formulier</h3>             <div>                 <p><button class="btn-start-new-form">start nieuw formulier</button></p>             </div>              <h3 id="formitems">formulier items</h3>             <div>             <p>             <div class="draggable" id="frmtitle"><button id="btnaddtitle" class="addbutton">titel</button></div>             <div class="draggable" id="boe"><button id="btnaddtxt" class="addbutton">tekstveld</button></div>             <button id="btnaddtxtarea" class="addbutton">tekst area</button>             <button id="btnaddsubmit" class="addbutton">verzend knop</button>             </p>             </div>              <h3>n/a</h3><div><p>n/a</p></div>             <h3>n/a</h3><div><p>n/a</p></div>          </div>          <div id="main" style="float:left;">             <ul>                 <li><a href="#tab-start">formulier opbouwen</a></li>                 <li><a href="backend/htmlcode.php">html code</a></li>                 <li><a href="backend/json.php">json</a></li>                 <li><a href="backend/xml.php">xml</a></li>                 <li><a href="backend/preview.php">preview</a></li>                 <li><a href="backend/help.php">help</a></li>             </ul>             <div id="tab-start">                 <div id="theform">                     <span id="theform_tmp">klik links in het menu op:"start nieuw formulier"</span>                 </div>             </div>         </div>     </div> 

hope can me this!


Comments