javascript - Dialog Box moves focus when clicking on element -
javascript - Dialog Box moves focus when clicking on <a> element -
edit: believe problem caused this.
i have jquery dialog long list of content. have tag on left of rows.
there text box @ top of window, , rows , rows of content below. when scroll downwards (so can't see text box) , click on anchor tag, located on each row, changes focus textbox , not allow click tag. doesn't phone call function tag.
i know function works though, since rows @ top (while text box visible) fire off right function , properly.
i'm not sure begin one, unusual problem i'm seeing.
i attach samples, window loaded through ajax, exclusively dynamic.
edit: dialog box: (it's ugly since generated through function)
<div class="ui-dialog-content ui-widget-content" id="edit-dialog" > <p class="validatetips"> form fields required. </p> <form id="edit-form" action="<redacted>.aspx"> <fieldset> <legend>edit:</legend> <label for="perm">permission title</label> <input name="perm" class="text ui-widget-content ui-corner-all" id="editpermname" type="text" /> <label for="hasdrop">has options</label> <input name="hasdrop" class="text ui-widget-content ui-corner-all" id="edit-hasoptions" type="checkbox" /> <br /> <br /> <div id="edit-perm-options"> <div id="div-9"> alternative 1: <input name="current-option-name-9" type="text" value="<redacted>" /><a title="delete option" href="javascript:void(0)"><span class="ui-icon ui-icon-closethick" style="margin-right: 5px; float: left;"></span></a><br /><br /> </div> <div id="div-11"> alternative 2: <input name="current-option-name-11" type="text" value="<redacted>" /><a title="delete option" href="javascript:void(0)"><span class="ui-icon ui-icon-closethick" style="margin-right: 5px; float: left;"></span></a><br /><br /> </div> <div id="div-13"> alternative 3: <input name="current-option-name-13" type="text" value="<redacted>" /><a title="delete option" href="javascript:void(0)"><span class="ui-icon ui-icon-closethick" style="margin-right: 5px; float: left;"></span></a><br /><br /> </div> <div id="div-3"> alternative 4: <input name="current-option-name-3" type="text" value="<redacted>" /><a title="delete option" href="javascript:void(0)"><span class="ui-icon ui-icon-closethick" style="margin-right: 5px; float: left;"></span></a><br /><br /> </div> <div id="div-4"> alternative 5: <input name="current-option-name-4" type="text" value="<redacted>" /><a title="delete option" href="javascript:void(0)"><span class="ui-icon ui-icon-closethick" style="margin-right: 5px; float: left;"></span></a><br /><br /> </div> <div id="div-5"> alternative 6: <input name="current-option-name-5" type="text" value="le<redacted>" /><a title="delete option" href="javascript:void(0)"><span class="ui-icon ui-icon-closethick" style="margin-right: 5px; float: left;"></span></a><br /><br /> </div> <div id="div-6"> alternative 7: <input name="current-option-name-6" type="text" value="<redacted>" /><a title="delete option" href="javascript:void(0)"><span class="ui-icon ui-icon-closethick" style="margin-right: 5px; float: left;"></span></a><br /><br /> </div> <div id="div-7"> alternative 8: <input name="current-option-name-7" type="text" value="<redacted>" /><a title="delete option" href="javascript:void(0)"><span class="ui-icon ui-icon-closethick" style="margin-right: 5px; float: left;"></span></a><br /><br /> </div> <div id="div-2"> alternative 9: <input name="current-option-name-2" type="text" value="<redacted>" /><a title="delete option" href="javascript:void(0)"><span class="ui-icon ui-icon-closethick" style="margin-right: 5px; float: left;"></span></a><br /><br /> </div> <div id="div-12"> alternative 10: <input name="current-option-name-12" type="text" value="<redacted>" /><a title="delete option" href="javascript:void(0)"><span class="ui-icon ui-icon-closethick" style="margin-right: 5px; float: left;"></span></a><br /><br /> </div> <div id="div-1"> alternative 11: <input name="current-option-name-1" type="text" value="<redacted>" /><a title="delete option" href="javascript:void(0)"><span class="ui-icon ui-icon-closethick" style="margin-right: 5px; float: left;"></span></a><br /><br /> </div> <div id="div-8"> alternative 12: <input name="current-option-name-8" type="text" value="<redacted>" /><a title="delete option" href="javascript:void(0)"><span class="ui-icon ui-icon-closethick" style="margin-right: 5px; float: left;"></span></a><br /><br /> </div> <div id="div-14"> alternative 13: <input name="current-option-name-14" type="text" value="test" /><a title="delete option" href="javascript:void(0)"><span class="ui-icon ui-icon-closethick" style="margin-right: 5px; float: left;"></span></a><br /><br /> </div> <div id="div-10"> alternative 14: <input name="current-option-name-10" type="text" value="<redacted>" /><a title="delete option" href="javascript:void(0)"><span class="ui-icon ui-icon-closethick" style="margin-right: 5px; float: left;"></span></a><br /><br /> </div> </div> </fieldset> </form> </div
the jquery remove rows:
$("#edit-perm-options").on("click", "a", function () { $(this).parent().remove(); });
double check href property of anchor tag. seek setting value "javascript:void(0);" rather "#" avoid moving screen
<a href="javascript:void(0);" />something</a>
javascript jquery html ajax
Comments
Post a Comment