Déclic de déclenchement jquery ne fonctionne pas

je me demande pourquoi ce simple script ne fonctionne pas: 

jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery('.next_button a').trigger('click');
});

noConflict est nécessaire parce que je charge aussi prototype/scriptaculous dans cette page.

si je remplace .trigger('click') par une autre fonction (es: .css(...) cela fonctionne bien. Seul le déclenchement semble cassé.

23
demandé sur Teun Zengerink 2011-05-03 13:08:05

4 réponses

comment simuler un clic d'ancre via jquery? Suivez ce lien et voir cette réponse par Stevanicus .

$('a#swaswararedirectlink')[0].click();

67
répondu A Bright Worker 2017-05-23 10:31:20

vous ne pouvez déclencher qu'un clic que jQuery a créé. C'est une des petites excentricités de jQuery.

50
répondu Gary Green 2011-05-03 09:13:01

comme ce que Gary a répondu. le code ci-dessous ne fonctionnera pas. 

$('#border_wrap').trigger('click');    
$('#border_wrap').click(function(e){
    console.log("clicked1");
});

mais ceci le fera.. :) 

$('#border_wrap').click(function(e){
    console.log("clicked1");
});
$('#border_wrap').trigger('click');
12
répondu keithics 2013-10-27 03:19:55

j'ai pensé que cette démo ne fonctionnerait pas mais il ne fonctionne (Chrome 12). Il alert deux messages, un pour chaque événement de clic. L'un est créé par jQuery et l'autre est natif mais je pensais que seuls les événements jQuery pouvaient être déclenchés.

Edit: Oui click ne pas suivre href .

Edit 2: Donc l'événement que vous voulez déclencher manuellement est en fait un événement créé par un plugin Prototype de carrousel. Pour le code ci-dessous, je suppose que c'est celui-ci . Si c'est le cas, pourquoi ne pouvez-vous pas simplement utiliser fire the event en utilisant Prototype ou nativement... comme ceci: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        #carousel-wrapper {
            width:100px;
            height:100px;
            overflow:hidden;
            border:1px dashed red;
        }
        #carousel-content {
            width:500px;
        }
        #carousel-content .slide {
            float:left;
            width:100px;
            height:100px;
        }
    </style>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js"></script>
    <script type="text/javascript" src="http://prototype-carousel.googlecode.com/files/carousel-min.js"></script>
    <script type="text/javascript" src="https://github.com/kangax/protolicious/raw/5b56fdafcd7d7662c9d648534225039b2e78e371/event.simulate.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        jQuery.noConflict();

        function fakeClick(event, anchorObj) {
          if (anchorObj.click) {
            anchorObj.click()
          } else if(document.createEvent) {
            if(event.target !== anchorObj) {
              var evt = document.createEvent("MouseEvents");
              evt.initMouseEvent("click", true, true, window,
                  0, 0, 0, 0, 0, false, false, false, false, 0, null);
              var allowDefault = anchorObj.dispatchEvent(evt);
              // you can check allowDefault for false to see if
              // any handler called evt.preventDefault().
              // Firefox will *not* redirect to anchorObj.href
              // for you. However every other browser will.
            }
          }
        }
    </script>
</head>
<body>
<div id="carousel-wrapper">
    <div id="carousel-content">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
    </div>
</div>
<div>
    <a href="javascript:" class="carousel-jumper" rel="slide-1">Jump to slide 1</a>
    <a href="javascript:" class="carousel-control" rel="prev">Previous slide</a>
    <a href="javascript:" class="carousel-control" id="next" rel="next">Next slide</a>
</div>
<script type="text/javascript">
    new Carousel('carousel-wrapper', $$('#carousel-content .slide'), $$('a.carousel-control', 'a.carousel-jumper'));

    document.observe("dom:loaded", function() {
//        $$('a[rel="next"]')[0].simulate('click');
        fakeClick(event, document.getElementById('next'));
    });
</script>
</body>
</html>

il y a deux exemples dans cette démo de mise à feu d'événements (l'un est commenté mais vous pouvez changer pour le même résultat). L'un est de Déclencher un événement avec le Prototype qui utilise event.simulate.js et un en utilisant la fonction fakeClick() de Comment puis-je simuler un clic sur une étiquette d'ancrage? . Qui travaille pour moi dans Chrome 12.

0
répondu andyb 2017-05-23 12:02:29