web-dev-qa-db-fra.com

Le déclencheur de clic ne fonctionne pas

Je comprends pourquoi ce script simple ne fonctionne pas:

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

noConflict est nécessaire car je charge également prototype/scriptaculous sur cette page.

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

jquerytriggerspageload
23
Riccardo

Vous pouvez uniquement déclencher un clic créé par jQuery. C'est l'une des petites bizarreries jQuery.

50
Gary Green

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 ça va .. :)

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

Je pensais que cette démo ne fonctionnerait pas mais ça marche (Chrome 12). 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, la click ne suit pas href. </ Strike>

Edit 2: Ainsi, l'événement que vous voulez déclencher manuellement est en réalité un événement créé par un plugin Prototype Carrousel. Pour le code ci-dessous, je suppose que c'est celui-ci . Si tel est le cas, pourquoi ne pouvez-vous pas simplement utiliser déclencher l'événement 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 existe deux exemples dans cette démonstration de déclenchement d’événement (l’un est commenté mais vous pouvez changer pour le même résultat). L'une provient de Déclenche un événement avec Prototype qui utilise event.simulate.js et l'autre à l'aide de la fonction fakeClick() de Comment puis-je simuler un clic sur une balise d'ancrage? . Ce qui fonctionne pour moi dans Chrome 12.

0
andyb