HTML-ссылка и Jquery Live работают только с первой попытки одним щелчком мыши

У меня возникла проблема с привязкой живого события jquery по ссылке. Когда ссылка добавляется на страницу, она работает нормально, однако, когда в неупорядоченный список добавляется другая ссылка, требуется два щелчка, чтобы событие щелчка сработало по любой ссылке. Любые идеи?

$("div#website-messages ul li a").live("click", function() {
    var link = $(this);
    changeTab(link.attr("href"));
    $(link.attr("title")).focus();
    return false;
});

РЕДАКТИРОВАТЬ: ОК, я сузил проблему. Если я возьму return false, событие сработает каждый раз. Проблема в том, что страница прыгает вверх. Любые идеи, чтобы остановить это?

Код, который создает ссылки:

Validation.validate = function() {
    var html = "";
    for (var i = 0; i < errors.length; i++) {
        html += "<li><a href='" + errors[i].tabid + "' title='" + errors[i].elementID + "'>" + errors[i].message + "</a></li>";
    }
    $("div#website-messages ul").html(html);
}

Функция ChangeTab

function changeTab(changeTo) {
    changeTo = changeTo.substr(changeTo.indexOf("#"), changeTo.length);
    $("#tabs div").hide();
    $(changeTo).show();

    $("ul.navigation li a").removeClass("selected");
    $("ul.navigation li a[href='" + changeTo + "']").addClass("selected");
}

РЕШЕНО У меня было событие размытия для текстовых вводов, которые были сфокусированы на них, что подтверждало их. Если бы я щелкнул одну из ошибок и сфокусировался на первом текстовом поле, а затем щелкнул на второй ошибке, он сфокусировался бы на втором текстовом поле, но вызвал бы событие размытия, а не фокус. Всем большое спасибо за вашу помощь и предложения, это сводило меня с ума весь день.


javascript jquery live
person Jon    schedule 31.03.2010    source источник
comment
Выполняется ли код дважды, по одному разу для каждой ссылки? Попробуйте поместить предупреждение внутри функции...   -  person James Westgate    schedule 31.03.2010
comment
Да, код будет выполняться один раз для каждой ссылки. Затем после этого требуется двойной щелчок, чтобы запустить его.   -  person Jon    schedule 31.03.2010
comment
@Jon Я думаю, что Джеймс предполагал, что, щелкнув одну ссылку только один раз, код, который у вас есть, может фактически выполняться дважды. И в результате попадает в странное состояние, когда поведение дает неожиданные результаты, потому что каждый щелчок выполняет код несколько раз. Можете ли вы привести пример вашей проблемы на jsbin.com?   -  person Matt    schedule 31.03.2010
comment
Я пытаюсь создать образец на jsbin, и он не воспроизводит проблему.   -  person Jon    schedule 31.03.2010
comment
Я бы предложил попытаться сузить различия между вашим кодом и тем, что работает в jsbin - очевидно, что-то другое   -  person Matt    schedule 31.03.2010
comment
Причина, по которой страница перескакивает наверх, заключается в том, что браузер перезагружает страницу. Вот почему вам нужно запретить браузеру обрабатывать ссылку (используя return false, event.preventDefault, void(0) и т. д.). Мне интересно, что вы пытаетесь сделать, когда добавляете .focus() в ссылку? Я разместил демо здесь о том, как работает/не работает фокус (pastebin.me/973509bd873d9ef90fa19c961e77fb27). И, как было сказано ранее, пример с jsbin был бы гораздо полезнее. Чего вы пытаетесь достичь, меняя вкладки и расположение ссылок?   -  person Mottie    schedule 31.03.2010
comment
Я не пытаюсь сосредоточиться на ссылке. Атрибут title ссылки имеет идентификатор ввода текста, на который я пытаюсь сфокусироваться.   -  person Jon    schedule 31.03.2010
comment
@Jon, в таком случае $(link.attr(title)).focus(); на самом деле должно быть $('#' + link.attr(title)).focus(); так как это идентификатор элемента.   -  person ryanulit    schedule 31.03.2010

Ответы (4)


arrow_upward
1
arrow_downward

РЕДАКТИРОВАТЬ: ОК, я сузил проблему. Если я возьму return false, событие сработает каждый раз. Проблема в том, что страница прыгает вверх. Любые идеи, чтобы остановить это?


попробуй

event.preventDefault();
person Jasper De Bruijn    schedule 31.03.2010
comment
Это возвращает ту же проблему, которая была у меня раньше. Любые другие предложения? - person Jon; 31.03.2010

arrow_upward
1
arrow_downward

Поскольку он прыгает вверх... каково содержание фактического href? Если это что-то вроде «#», то он, скорее всего, переместится наверх. Если результатом клика является изменение содержимого на странице, а не фактический переход со страницы, вы можете рассмотреть возможность использования:

<a href="javascript:void(0)">linky</a>
person Matt    schedule 31.03.2010
comment
Это предотвратит переход страницы наверх, но также предотвратит запуск события каждый раз. - person Jon; 31.03.2010
comment
Я думаю, я смущен тем, что вы пытаетесь выполнить - ссылка ведет на новую страницу или нет? Если вы просто используете ссылку для запуска событий на странице, вам нужно вернуть false или использовать javascript:void(0) или # в качестве href. Если вы не вернете false, он перейдет по URL-адресу href. - person Matt; 31.03.2010

arrow_upward
1
arrow_downward

это предотвращает переход ссылки наверх:

<div id="website-messages">
<ul>
<li><a href="javascript:;" >my link</a></li>
</ul>
</div>

это заставляет js срабатывать каждый раз!

$("div#website-messages ul li a").live("click", function(e) {
    //this make it fire every time!
    e.preventDefault();
    var link = $(this);
    changeTab(link.attr("href"));
    $(link.attr("title")).focus();
});

ОБНОВЛЕНИЕ:

ваша ссылка должна быть примерно такой:

<li><a id='" + errors[i].elementID + "' href='javascript:;' title='" + errors[i].tabid + "'>" + errors[i].message + "</a></li>
person Luca Filosofi    schedule 31.03.2010
comment
Та же проблема :-( . Любые другие предложения? - person Jon; 31.03.2010
comment
У меня есть форма с интерфейсом с вкладками. С правой стороны я перечисляю все ошибки для формы, и каждая ошибка кликабельна. Когда пользователь щелкает ошибку, она переходит на правильную вкладку и должна фокусироваться на текстовом вводе, связанном с ошибкой. Знаете ли вы другой способ выполнить то, что я пытаюсь сделать? - person Jon; 31.03.2010
comment
возможно, проблема в другом, правильная форма предотвращения перехода по ссылке сверху или использование return false; или предотвратить по умолчанию; Вы можете добавить какой-нибудь другой код!? - person Luca Filosofi; 31.03.2010
comment
Не обращайте внимания на мой последний комментарий по поводу focus(); моя вина; вместо этого проверьте changeTab(link.attr(href)); вероятно, вкладки, вызывающие ошибку! попробуй! - person Luca Filosofi; 31.03.2010
comment
Все еще не работает, я добавил функцию changeTab в код выше. Спасибо за всю твою помощь! - person Jon; 31.03.2010
comment
ОК, я сузил его еще больше. Если я нахожусь на любой другой вкладке и нажимаю любую из ссылок на ошибку, она работает отлично. Единственный раз, когда это не работает, это когда я нахожусь на той же вкладке, что и вкладка, на которую меня ведет ссылка с ошибкой. - person Jon; 31.03.2010

arrow_upward
0
arrow_downward

У меня было событие размытия для текстовых вводов, которые были сфокусированы на том, что их проверяли. Если бы я щелкнул одну из ошибок и сфокусировался на первом текстовом поле, а затем щелкнул на второй ошибке, он сфокусировался бы на втором текстовом поле, но вызвал бы событие размытия, а не фокус.

person Jon    schedule 31.03.2010