对话框点击<a>元素
Dialog Box moves focus when clicking on <a> element
编辑:我认为问题是由这个引起的
我有一个jQuery对话框与内容的长列表。我在一些行的左边有一个标签。
在窗口的顶部有一个文本框,下面是一行一行的内容。当您向下滚动(因此无法看到文本框)并单击位于每行上的锚标记时,它会将焦点更改为文本框,并且不允许您单击标记。它甚至不调用标签的函数。
我知道这个函数是有效的,因为在顶部的行(而文本框是可见的)触发了正确的函数,并正确地做了一切。
我不知道从哪里开始,因为这是我看到的一个非常奇怪的问题。
我会附上一些示例,但是窗口是通过Ajax加载的,所以它完全是动态的。
编辑:对话框:(它很丑,因为它是通过另一个函数生成的)
<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
jQuery删除行:
$("#edit-perm-options").on("click", "a", function () {
$(this).parent().remove();
});
仔细检查锚标记的href属性。尝试将值设置为"javascript:void(0);"而不是"#"以避免移动屏幕
<a href="javascript:void(0);" />something</a>
相关文章:
- 单击函数生成的 jQuery 对话框中的元素
- Jquery具有iframe和生成的元素的简单模态对话框
- jQuery对话框,关闭时在对话框中隐藏一个元素
- 循环遍历javascript数组,并在JQuery对话框中显示每个元素
- 如何获取离子对话框中动态加载的元素的元素高度
- 专注于第一个表单元素,无论它是什么.j查询对话框
- 单击元素后无法显示角度对话框
- 在显示事件后替换 CKEditor 对话框中的元素
- “Jquery ”对话框在表单元素中不会保持打开状态
- 使用 JQuery 在动态 JQuery UI 对话框中为动态创建的表单元素设置值
- 如何使用鼠标移动<对话框>元素
- onsen ui:访问ons对话框's父页中的DOM元素
- 在jQuery UI对话框中设置元素样式
- 在jQueryUI对话框中显示和格式化数组元素
- ckeditor-如何将css类添加到对话框中的输入元素中
- 通过Javascript函数打开和关闭对话框元素
- 如何访问jQuery UI对话框中的元素
- CKEditor在dialogDefinition上添加的另一个元素的Set Up函数中获取表对话框类init Valu
- jQuery UI-如何在对话框关闭后删除动态元素
- jQuery UI对话框:对话框元素从DOM中消失