0

私は一般的にコーディングを始めたばかりで、レールでコーディングすることを学んでおり、jquery で非常に基本的な何かが欠けているように感じます。

私のユーザー プロフィール ページには、ユーザーがアバター画像を変更するためのリンクがあります。

<div id="show_avatars_choice">
  <%= link_to "Change Avatar", "#", remote: true %>
</div>

次に、/assets/javascripts/users.js に次のものがあります。

$("#show_avatars_choice").on("click", function(event){
  event.preventDefault();
  alert("you clicked me");
})

最終的に、アラートは別のアバター画像を選択して表示できるようにするコードに置き換えられますが、この段階では、リンクをクリックしても単純なアラートでさえポップアップしません。私は何を間違っていますか？

application.js ファイルには、次の行が含まれています。

//= require jquery
//= require jquery_ujs
//= require_tree .

ご回答ありがとうございます。

4

2 に答える 2

2

Tracy Fu が言ったことは正しかったです。要素はバインド前にページにある必要があります。彼女の答えは正しいですが、次のようにすると短くなります。

$(document).on("click", "#show_avatars_choice", function(event){
  event.preventDefault();
  alert("you clicked me");
})​

実際に見てみましょう: http://jsfiddle.net/sXVzU/

また、Tracy Fu のフィドルにいくつかの変更を加えました: http://jsfiddle.net/4qRjt/

于 2012-06-28T07:35:44.807 に答える
0

要素がDOMに存在する前にイベントをバインドしていることが問題である可能性はありますか? 私が理解していることから、jQueryonでは、最初のバインドの前に要素がページ上にある必要があります。

これを試していただけますか：

// This will run when the DOM is loaded
$(function() {
  $("#show_avatars_choice").on("click", function(event){
    event.preventDefault();
    alert("you clicked me");
  })
});

これは、DOM ロードの前後にバインドしようとすることを示すフィドルです: http://jsfiddle.net/tracyfu/FX5aC/

于 2012-06-28T04:49:23.063 に答える