Могу ли я вызвать jQuery click (), чтобы перейти по ссылке, если я еще не привязал к ней обработчик событий с помощью bind или click?

у меня есть таймер в моем JavaScript, который должен эмулировать щелчок по ссылке, чтобы перейти на другую страницу по истечении времени. Для этого я использую jQuery

10 ответов


интересно, это, вероятно, "запрос функции" (т. е. ошибка) для jQuery. Событие jQuery click только запускает действие click (называемое событием onClick на DOM) для элемента, если вы привязываете событие jQuery к элементу. Вы должны перейти к спискам рассылки jQuery ( http://forum.jquery.com/) и сообщить об этом. Это может быть желаемое поведение, но я так не думаю.

изменить:

Я провел некоторое тестирование, и то, что вы сказали, неправильно, даже если вы связываете функцию для тега " a " он по-прежнему не принимает вас на веб-сайт, указанный атрибутом href. Попробуйте следующий код:

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 <script>
  $(document).ready(function() {
   /* Try to dis-comment this:
   $('#a').click(function () {
    alert('jQuery.click()');
    return true;
   });
   */
  });
  function button_onClick() {
   $('#a').click();
  }
  function a_onClick() {
   alert('a_onClick');
  }
 </script>

</head>
<body>
 <input type="button" onclick="button_onClick()">
 <br>
 <a id='a' href='http://www.google.com' onClick="a_onClick()"> aaa </a>

</body>
</html> 

Он никогда не идет к google.com если вы напрямую не нажмете на ссылку (с или без прокомментированного кода). Также обратите внимание, что даже если вы привязываете событие click к ссылке, оно все равно не становится фиолетовым после нажатия кнопки. Он становится фиолетовым, только если вы нажмете ссылку напрямую.

Я сделал некоторые исследования и кажется, что .click не должен работа с тегами "a", потому что браузер не поддерживает" поддельный щелчок " с помощью javascript. Я имею в виду, вы не можете "щелкнуть" элемент с javascript. С помощью тегов " a " вы можете вызвать событие onClick, но ссылка не изменит цвета (для цвета посещаемой ссылки по умолчанию в большинстве браузеров используется фиолетовый). Поэтому не имеет смысла делать $().нажмите событие работа с тегами "a", так как акт перехода к атрибуту href не является частью события onClick, а жестко закодирован в браузере.


другой вариант, конечно, просто использовать vanilla javascript:

document.getElementById("a_link").click()

если вы посмотрите на код $.click функция бьюсь об заклад, есть условный оператор, который проверяет, есть ли у элемента прослушиватели, зарегистрированные дляclick событие до его поступления. Почему бы просто не получить href атрибут из ссылки и вручную изменить расположение страницы?

 window.location.href = $('a').attr('href');

EDIT: вот почему он не щелкает, из trigger функция, источник jQuery для версии 1.3.2:

 // Handle triggering native .onfoo handlers (and on links since we don't call .click() for links)
    if ( (!elem[type] || (jQuery.nodeName(elem, 'a') && type == "click")) && elem["on"+type] && elem["on"+type].apply( elem, data ) === false )
        event.result = false;

    // Trigger the native events (except for clicks on links)
    if ( !bubbling && elem[type] && !event.isDefaultPrevented() && !(jQuery.nodeName(elem, 'a') && type == "click") ) {
        this.triggered = true;
        try {
            elem[ type ]();
        // prevent IE from throwing an error for some hidden elements
        } catch (e) {}
    }

после того, как он вызывает обработчики (если они есть) jQuery запускает событие на объекте. Однако он вызывает только собственные обработчики для событий click, если элемент не является ссылкой. Я думаю, это было сделано намеренно по какой-то причине. Это должно быть правдой, хотя определен ли обработчик событий или нет, поэтому я не уверен, почему в вашем случае присоединение обработчика событий вызвало native onClick вызываемый обработчик. Вы должны будете сделать то же, что и я, и пройти через казнь, чтобы увидеть, где она называется.


обработчики щелчков по тегам привязки-особый случай в jQuery.

Я думаю, что вы можете запутаться между событием onclick якоря (известным браузером) и событием click объекта jQuery, который обертывает понятие DOM тега якоря.

вы можете скачать источник jQuery 1.3.2 здесь.

соответствующими разделами источника являются строки 2643-2645 (я разделил это на несколько строк, чтобы упростить понять):

// Handle triggering native .onfoo handlers (and on links since we don't call .click() for links)
if (
     (!elem[type] || (jQuery.nodeName(elem, 'a') && type == "click")) && 
       elem["on"+type] && 
       elem["on"+type].apply( elem, data ) === false
   )
     event.result = false;

JS / jQuery не поддерживает поведение по умолчанию ссылок "щелкнул" программно.

что вы можете сделать, это создать форму и отправить ее. Таким образом, вам не нужно использовать window.location или window.open, которые часто блокируются как нежелательные всплывающие окна браузерами.

этот скрипт имеет 2 разных метода: один, который пытается открыть 3 новые вкладки/окна (он открывает только 1 в IE и Chrome, подробнее ниже) и один, который запускает пользовательское событие по ссылке.

здесь как:

HTML-код

<html>
<head>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
</head>
<body>
    <button id="testbtn">Test</button><br><br>

    <a href="https://google.nl">GOOGLE</a><br>
    <a href="http://en.wikipedia.org/wiki/Main_Page">WIKI</a><br>
    <a href="https://stackoverflow.com/">SO</a>
</body>
</html>

jQuery (скрипт.в JS)

$(function()
{ 
    // Try to open all 3 links by pressing the button
    // - Firefox opens all 3 links
    // - Chrome only opens 1 of them without popup warning
    // - IE only opens 1 of them WITH popup warning
    $("#testbtn").on("click", function()
    {
        $("a").each(function()
        {
            var form = $("<form></form>");
            form.attr(
            {
                id     : "formform",
                action : $(this).attr("href"),
                method : "GET",
                // Open in new window/tab
                target : "_blank"
            });

            $("body").append(form);
            $("#formform").submit();
            $("#formform").remove();
        });
    });

    // Or click the link and fire a custom event 
    // (open your own window without following the link itself)
    $("a").on("click", function()
    {
        var form = $("<form></form>");
        form.attr(
        {
            id     : "formform",
            // The location given in the link itself
            action : $(this).attr("href"), 
            method : "GET",
            // Open in new window/tab
            target : "_blank"              
        });

        $("body").append(form);
        $("#formform").submit();
        $("#formform").remove();

        // Prevent the link from opening normally
        return false;
    });

});

что он делает для каждого элемента ссылки:

  1. создать форму
  2. дайте ему атрибуты
  3. добавьте его в DOM, чтобы его можно было отправить
  4. представить
  5. удалите форму из DOM, удалив все следы * вставьте злой смех*

теперь у вас есть новая вкладка/окно загрузки "https://google.nl" (или любой URL, который вы хотите, просто замените его). К сожалению, когда вы пытаетесь открыть более одного окна таким образом, вы получаете Popup blocked messagebar при попытке открыть второй (первый по-прежнему открыт).


подробнее о том, как я добрался до этого метода, можно найти здесь:

открытие нового окна / вкладки без использования window.open или window.location.href


вызовите элемент гиперссылки, который находится внутри элемента, который вы хотите подключить jquery .нажмите кнопку()

<div class="TopicControl">
    <div class="articleImage">
       <a href=""><img src="" alt=""></a>
    </div>
</div>

в вашем скрипте вы подключаетесь к основному контейнеру, на котором вы хотите событие click. Затем вы используете стандартную методологию jquery, чтобы найти элемент (тип,класс,идентификатор) и запустить щелчок. Что происходит, jquery вводит рекурсивную функцию для запуска щелчка, и вы нарушаете рекурсивную функцию, беря функцию event 'e' и stopPropagation () и возвращаете false, потому что вы не хочу, чтобы jquery делал что-то еще, кроме запуска ссылки.

$('.TopicControl').click(function (event) {
         $(this).find('a').click();
        event.stopPropagation();
        return false;
     });

альтернативное решение заключается в том, чтобы обернуть контейнеры в элемент и поместить их в качестве контейнеров внутри вместо "s". Установите пяди для отображения блока в соответствии со стандартами w3c.


Он ничего не делает, потому что никакие события не были привязаны к событию. Если я правильно помню, jQuery поддерживает свой собственный список обработчиков событий, которые привязаны к NodeLists для производительности и других целей.


Если вам нужна эта функция для одного случая или очень немногих касс. (все приложение you'R не требует этой функции) я бы предпочел оставить jQuery как есть (по многим причинам, включая возможность обновления до более новых версий, CDN и т. д.) и имеют следующий обходной путь:

// For modren Browsers
$(ele).trigger("click");

// Relaying on Paul Irish's conditional class names http://bit.ly/HWIpAp (via HTML5 Boilerplate http://bit.ly/HUzi3I) where each IE version gets a class of its Version
$("html.ie7").length && (function(){
    var eleOnClickattr = $(ele).attr("onclick") 
    eval(eleOnClickattr);
  })()

вы можете использовать jQuery для выбора объекта jQuery для этого элемента. Затем получите Базовый элемент DOM и вызовите его click() метод.

по id

$("#my-link").each(function (index) { $(this).get(0).click() });

или используйте jQuery, чтобы щелкнуть кучу ссылок по классу CSS

$(".my-link-class").each(function (index) { $(this).get(0).click() });

чтобы открыть гиперссылку на той же вкладке, используйте:

$(document).on('click', "a.classname", function() {
    var form = $("<form></form>");
    form.attr(
    {
        id     : "formid",
        action : $(this).attr("href"),
        method : "GET",
    });

    $("body").append(form);
    $("#formid").submit();
    $("#formid").remove();
    return false;
});