onclickイベントリスナーは一度だけ実行します

Question

jQueryでコードを書き、イベントリスナーonclickを追加しようとしています。コードを実行すると、イベントリスナーは一度実行されますが、繰り返しは実行されません。なぜこうなった？

これをaddEventListener('click'...)に置き換えると正常に動作します。

$(function(){ 
 
    var url = "https://www.bensound.com/bensound-img/jazzcomedy.jpg"; 
 
    var doSomething = { 
 
    clickedNow: function(){ 
 
    alert("Clicked ok now"); 
 
    } 
 
    }; 
 
    
 
    $('#click-me').attr('src',url); 
 
    $('#click-me').onclick = doSomething.clickedNow(); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<figure> 
 
<img id="click-me" alt="An image went missing here"> 
 
<figcaption><figcaption> 
 
</figure>

Answer 1

onClickは、jQueryセレクタに追加しようとしているJavaScript関数です。あなたが本当にそれをこのようにやりたいなら、あなたはそれを変更することでそれを行うことができます。

$('#click-me')[0].onclick = doSomething.clickedNow;

コードの恋人のようなjQueryのクリック機能を使用する方がよいかもしれませんが、その答えで提案されています。ここで

$(function(){ 
 

 
    var url = "https://www.bensound.com/bensound-img/jazzcomedy.jpg"; 
 
    var doSomething = { 
 
    clickedNow: function(){ 
 
     alert("Clicked ok now"); 
 
    } 
 
    }; 
 
    
 
    $('#click-me').attr('src',url); 
 
    $('#click-me')[0].onclick = doSomething.clickedNow; 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<figure> 
 
<img id="click-me" alt="An image went missing here"> 
 
<figcaption><figcaption> 
 
</figure>

Answer 2

$(function(){ 
 
    var url = "https://www.bensound.com/bensound-img/jazzcomedy.jpg"; 
 
    var doSomething = { 
 
    clickedNow: function(){ 
 
    alert("Clicked ok now"); 
 
    } 
 
    }; 
 
    
 
    $('#click-me').attr('src',url); 
 
    $('#click-me').click(function(){ 
 
     doSomething.clickedNow(); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<figure> 
 
<img id="click-me" alt="An image went missing here"> 
 
<figcaption><figcaption> 
 
</figure>

あなたはjqueryのを使用しているとjQueryで.onclick事があります。正しい構文は上記のコードにあります。それを確認します。それは働いている。

Answer 3

$('#click-me').onclick = doSomething.clickedNow(); 

あなたが望むものではない機能doSomething.clickedNow、結果を等しくするのonclickイベントを設定しています。

あなたがしたいことは、clickイベントのイベントリスナーを追加してそこに関数を実行することです。

はこれを試してみてください。

$('#click-me').click(function(){ 
     doSomething.clickedNow(); 
    }); 

さらに良いことにはjqueryのスタイルを使用して、クリックにイベントリスナーを追加するようなので、

$("#click-me'").on("click", function() { 
    doSomething.clickedNow(); 
});