#javascript #jquery #html #ajax
#javascript #jquery #HTML #ajax
Вопрос:
Редактировать: я считаю, что проблема вызвана этим.
У меня есть диалоговое окно 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();
});
Комментарии:
1. еще раз… довольно сложно понять, что происходит, если вы не предоставляете какой-либо код
2. Используйте элемент Inspite, чтобы дать нам некоторый html-код. JS можно легко скопировать.
Ответ №1:
дважды проверьте свойство href вашего тега привязки. попробуйте установить значение «javascript:void(0);», а не «#», чтобы избежать перемещения экрана
<a href="javascript:void(0);" />something</a>
Комментарии:
1. Я попробовал это, и он все равно поднялся на вершину. Он прыгает при наведении курсора мыши вниз, даже не при наведении курсора мыши вверх. Я не могу понять, что является причиной этого.