勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryで指定の行動をとった際に、クリックイベントを発火させる方法

   2023/10/25  jQuery JavaScript

あるシステムでAという要素をクリックした際に何らかの処理を行うという部分があり、それとは別にBという要素をクリックした際にこのAもクリックした、という挙動を取りたかった。つまり「実際はクリックしていないのに、クリックした」という部分をjQueryで実装したかった。以下に実装方法のメモ。

 

ソースコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
</head>
<body>
<div id="test">click</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){
//#testという要素をクリックするとログを出力
$('#test').on('click', function(){
console.log('click');
});
//以下3つの方法で実装可能
$('#test').click();
$('#test').trigger('click');
$('#test').get(0).click();
});
</script>
</body>
</html>
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>test</title> </head> <body> <div id="test">click</div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script> <script type="text/javascript"> $(function(){ //#testという要素をクリックするとログを出力 $('#test').on('click', function(){ console.log('click'); }); //以下3つの方法で実装可能 $('#test').click(); $('#test').trigger('click'); $('#test').get(0).click(); }); </script> </body> </html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
</head>
<body>

    <div id="test">click</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(function(){

    //#testという要素をクリックするとログを出力
    $('#test').on('click', function(){
        console.log('click');
    });

    //以下3つの方法で実装可能
    $('#test').click();
    $('#test').trigger('click');
    $('#test').get(0).click();
});
</script>
</body>
</html>

 

それぞれの違い

3つの方法の違いは以下ページあたりが分かりやすい。

https://norm-nois.com/blog/archives/5760

http://var.blog.jp/archives/44807272.html

 - jQuery JavaScript

  関連記事

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...

jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法

あるサイトのソースコードを拝見しているとToastrというJSファイルをCDNで ...

jQueryでHTMLの特定要素をループ時に逆順で処理する方法

jQueryでリスト(li)タグ等の特定要素をeach()でループ処理する場合、 ...

FullCalendarでカレンダー内のイベントをクリックした際にタイトル以外の内容も表示させる方法

FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...

jQueryで対象の要素をまとめて親要素で囲む方法

あるシステムで出力されているHTMLタグを指定した親要素で囲みたいというケースが ...

S