it-swarm.com.de

Trigger-Klick-Jquery funktioniert nicht

Ich finde heraus, warum dieses einfache Skript nicht funktioniert:

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

noConflict ist notwendig, weil ich auf dieser Seite auch Prototyp/Scriptaculous lade.

Wenn ich .trigger('click') durch eine andere Funktion ersetze (es: .css(...)), funktioniert das gut. Nur das Auslösen scheint defekt zu sein.

23
Riccardo

Wie kann ich einen Ankerklick über jquery simulieren? Überprüfen Sie diesen Link und sehen Sie diese Antwort von Stevanicus .

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

67
A Bright Worker

Sie können nur einen Klick auslösen, den jQuery erstellt hat. Es ist eines von süßen kleinen Macken von jQuery.

50
Gary Green

als was Gary geantwortet hat. Der folgende Code funktioniert nicht.

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

aber das wird .. :)

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

Ich dachte, diese Demo würde nicht funktionieren, aber (Chrome 12). Es werden alert zwei Nachrichten angezeigt, eine für jedes Klickereignis. Eines wird von jQuery erstellt und eines ist nativ, aber ich dachte, dass nur jQuery-Ereignisse ausgelöst werden könnten.

Edit: Ja, die click folgt nicht auf href. </ Strike>

Edit 2: Das Ereignis, das Sie manuell auslösen möchten, ist also ein Ereignis, das von einem Prototype-Karussell-Plugin erstellt wird. Für den folgenden Code gehe ich davon aus, dass es dieses ist. Wenn dies der Fall ist, warum können Sie Feuer das Ereignis nicht einfach mit Prototype oder nativ… wie folgt verwenden:

<!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>

In dieser Demo gibt es zwei Beispiele für das Auslösen von Ereignissen (eines ist auskommentiert, aber Sie können für dasselbe Ergebnis wechseln). Einer ist aus Auslösen eines Ereignisses mit Prototyp , der event.simulate.js verwendet, und einer, der die Funktion fakeClick() aus Wie kann ich einen Klick auf ein Ankertag simulieren? . Jeder davon arbeitet für mich in Chrome 12.

0
andyb