单击<a>元素</a>时对话框会移动焦点

Question

Edit: I believe that the problem is caused by this .

I have a jQuery dialog with a long list of content. I have an tag on the left of some rows.

There is a text box at the top of the window, and rows and rows of content below. When you scroll down (so you can't see the text box) and click on an anchor tag, located on each row, it changes focus to the textbox and does not allow you to click the tag. It doesn't even call the function for the tag.

I know the function works though, since the rows at the top (while the text box is visible) fire off the correct function and do everything properly.

I'm not sure where to begin with this one, as this is a very strange problem I'm seeing.

I would attach some samples, but the window is loaded through Ajax, so it is entirely dynamic.

Edit: The Dialog Box: (It's ugly since it is generated through another function)

 <div class="ui-dialog-content ui-widget-content" id="edit-dialog" >


  <p class="validateTips">
   All form fields are 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">
  Option 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">
  Option 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">
  Option 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">
  Option 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">
  Option 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">
  Option 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">
  Option 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">
  Option 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">
  Option 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">
  Option 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">
  Option 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">
  Option 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">
  Option 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">
  Option 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 to remove rows:

$("#edit-perm-options").on("click", "a", function () {
            $(this).parent().remove();
        });

Answer 1

double check the href property of your anchor tag. try setting the value to "javascript:void(0);" rather than "#" to avoid moving the screen

<a href="javascript:void(0);" />something</a>