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
Post a Comment