web-dev-qa-db-ja.com

トリガークリックjQueryが機能しない

この単純なスクリプトが機能しない理由を理解しています。

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

noConflictは、このページでもprototype/scriptaculousを読み込むために必要です。

.trigger('click')を別の関数（es：.css(...)に置き換えた場合、これはうまく機能します。トリガーのみが壊れているようです。

jquerytriggerspageload
23
Riccardo

jqueryを使用してアンカークリックをシミュレートするにはどうすればよいですか？ このリンクを確認し、 この回答はStevanicusによる を参照してください。

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

67
A Bright Worker

JQueryが作成したクリックのみをトリガーできます。これは、jQueryのかわいいちょっとした癖の1つです。

50
Gary Green

ゲイリーが答えたように。以下のコードは機能しません。

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

しかし、これは.. :)

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

このデモ は機能しないと思いましたが、機能します（Chrome 12）。クリックイベントごとに1つずつ、2つのメッセージをalertします。 1つはjQueryによって作成され、もう1つはネイティブですが、jQueryイベントのみをトリガーできると考えました。

編集：はい、clickはhrefの後に続きません。

編集2：したがって、手動でトリガーするイベントは、実際にはPrototype carouselプラグインによって作成されたイベントです。以下のコードでは、 this one と仮定しています。その場合、Prototypeを使用するか、ネイティブで... イベントを発生させる を使用できないのはなぜですか？

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

このイベント発生のデモには2つの例があります（1つはコメント化されていますが、同じ結果に切り替えることができます）。 1つは Prototypeでイベントをトリガー から event.simulate.js を使用し、1つは _クリックからアンカータグへのシミュレーションを行う方法）からfakeClick()関数を使用します？ 。いずれかがChrome 12。

0
andyb