首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >对话框在单击<a>元素时移动焦点

对话框在单击<a>元素时移动焦点
EN

Stack Overflow用户
提问于 2014-06-18 22:37:48
回答 1查看 109关注 0票数 0

编辑:我认为问题是由引起的

我有一个包含大量内容的jQuery对话框。我在一些行的左边有一个标签。

窗口顶部有一个文本框,下面有几行内容。当您向下滚动(因此您看不到文本框)并单击位于每行的锚标记时,它会将焦点更改为textbox,不允许您单击该标记。它甚至不为标记调用函数。

不过,我知道该函数可以工作,因为顶部的行(当文本框可见时)触发了正确的函数,并正确地执行了所有操作。

我不知道从哪里开始这个,因为这是一个非常奇怪的问题,我正在看到。

我会附加一些示例,但是窗口是通过Ajax加载的,所以它是完全动态的。

编辑:对话框:(它很难看,因为它是通过另一个函数生成的)

代码语言:javascript
复制
 <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:

代码语言:javascript
复制
$("#edit-perm-options").on("click", "a", function () {
            $(this).parent().remove();
        });
EN

回答 1

Stack Overflow用户

发布于 2014-06-18 23:40:04

重复检查锚标记的href属性。尝试将值设置为"javascript:void(0);“而不是"#”,以避免移动屏幕

代码语言:javascript
复制
<a href="javascript:void(0);" />something</a>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24296116

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档