jquery - Modal windows and binding/unbinding -
i have modal window pops when "add new" selected dropdown. user can type in text field new option added dropdown. works fine long text input each time each of new fields (thanks awesome community why jquery ajax post twice here? :-) problem if user dismisses modal clicking outside of , selects "add new" , attempts enter text, when add button clicked there bunch of extraneous actions, in linked question above. unbinding needs done, can't figure out. ideally user should able open , dismiss number of modal windows , still able enter data. ideas?
here's jquery:
<script type="text/javascript"> var classofentry = ''; $('#upload_form option[value="addnew"]').click(function(){ // show modal window $('#add-new').modal('show'); // class //var classofentry = $('#upload_form option[class]').attr("class"); var classofentry = $(this).attr("class"); //console.log(classofentry); $('#add-new-submit').on('click', function(){ // new option text field var value = $('#add-new-text').val(); //console.log(value); $.ajax({ type: "post", url: "<?php echo site_url(); ?>main/change_options", data: {new_option: value, new_option_class: classofentry}, datatype: "html", error: errorhandler, success: success }); function success(data) { $('#'+classofentry).append("<option value='" + data + "'selected=\"selected\">" + data + "</option>"); //alert(data); //alert('success!'); } function errorhandler() { alert('error ajax!'); } $('#add-new-submit').unbind('click'); // fixes problem multiple entries //$('#add-new-text').unbind('click'); //$('#upload_form option[value="addnew"]').unbind('click') $('#add-new').modal('toggle'); }); //$('#add-new-submit').unbind('click'); //$('#upload_form option[value="addnew"]').unbind('click'); }); </script> here's modal:
<!-- add-new field --> <div class="modal small hide fade" id="add-new" tabindex="-1" role="dialog" aria-labelledby="add-new-fieldlabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="add-new-fieldlabel">add new field</h3> </div> <div class="modal-body"> <p>would add new item?</p> <input type="text" id="add-new-text" name="add-new-text" placeholder="type new option"> </div> <div class="modal-footer"> <button type="button" class="btn btn-success" id="add-new-submit" name="add-new-submit"/>add</button> </div> </div><!-- /add-new field -->
you need bind event handler doesn't replaced in dom, ie <body>:
$(document.body).on('click', '#someelement', function() { // }); you bind parent tag know won't replaced.
Comments
Post a Comment