javascript - jQuery.find() a form into an element not working -
dynamically generate formular defined div-container , grab send-action sending ajax.
the generate html:
<div class="mhuntform"> <form action="/wp-admin/admin-ajax.php" method="post"> <h2>title</h2> <p>a text</p> <div id="form" style="padding: 5px 0px;"> <p> <label for="email" style="display: inline-block; margin-right: 10px;">e-mail</label> <input type="email" name="email" id="email" placeholder="e-mail" style="width: 60%;"> </p> <p> <button name="mhskl_send" id="mhskl_send">anmelden</button> </p> </div> </form> </div>
the formular defined admin wordpress-page. in javascript (jquery) know classname of div-container (here .mhuntform). in javascript try catch event:
// mhuntskl.options.container = '.mhuntform' $(mhuntskl.options.container).find('form').submit(function(ev){ ev.preventdefault(); var email = $(mhuntskl.options.container).find('input[type="email"]').val(); var res = $.ajax(mhuntskl.options.ajaxurl,{async:false,data:{action:'subscribe',email:email},datatype:'json',type:'post'}).responsetext; res = $.parsejson(res); if (res.success) { $(mhuntskl.options.container).hide(); } return false; }
but unfortunately submit-event not catch , if prints containter find console console.log($(mhuntskl.options.container).find('form'))
received empty object only.
what make wrong here?
if console.log($(mhuntskl.options.container).length); 1 , console.log($(mhuntskl.options.container).find('form').length); 0 there 1 possible reason. form still not inside .mhuntform div when execute code. form generated javascript. if not, js code wrapped in $(document).ready.
Comments
Post a Comment