1
application.jsでは、私はすべての 'トピック'をajax呼び出しのページにコンパイルしておき、クリックするとすべての情報が画面に表示されます。すべての開発で素晴らしい作品が、私は500サーバーのエラーが発生します。なぜ、console.logは20回ではなく1回だけ機能しますか？
これをデバッグしようとすると、コンソールが.onclick呼び出しで20回ロギングしていることがわかりました。なぜこれが起こっているのですか？生産（英雄）で500エラーが返されている理由は何ですか？
私はこの問題が発生している3つのconsole.logの周りに** **を付けます。
var listingSource = $("#listingTopics").html();
var compiledTopics = Handlebars.compile(listingSource);
トピックハンドルテンプレート：事前に
<script id="listingTopics">
<div>
<a href={{link}} class="listing-topics">{{title}}</a>
</div>
</script>
おかげ同じJSファイルの一番下に
if(window.location.pathname === "/topics") {
$('.actions').click(function(e) {
console.log("submit");
})
$.ajax({
url: '/topics',
dataType: 'json',
type: 'GET',
success: function(result) {
console.log(result);
for(var i = 0; i < result.length; i++) {
var title = result[i].title;
var level = result[i].level;
var id = result[i].id;
var favlink = '/topics/' + id + '/favorite';
var link = '/topics/' + id;
var topicInfo = {title: title, link: link};
var template = compiledTopics(topicInfo);
$('.topic-wrapper').append(template);
$('.listing-topics, .favorite-topic-title').click(function(e){
e.preventDefault();
if($(this).hasClass("favorite-topic-title")) {
var heartClass = "favorited_heart_icon"
}
else if($(this).hasClass("listing-topics")) {
var heartClass = "unfavorited_heart_icon";
$('html, body').animate({ scrollTop: 0 }, 'fast');
}
**console.log(this);**
$.ajax({
url: this,
dataType: "json",
type: 'GET',
success: function(result) {
var id = result.id;
var title = result.title;
var body = result.body;
var level = result.level
**console.log(level);**
//SHOW TOPIC and FAVTOPIC AS POPUP WHEN CLICKED
//Add proper favorite icon.
var favlink = '/topics/' + id + '/favorite';
**console.log(heartClass);**
var topicInfo = {title: title, body: body, heartClass: heartClass};
var template = compiled(topicInfo);
$('.topic-wrapper').append(template);
//CLOSE TOPIC WHEN CLICKING THE GREY SURROUNDING BOX - topicClose
$('.topicClose').click(function(e) {
$('.topicClose').css("display", "none");
$('.show_topic').css("display", "none");
})
//FAVORITE TOPIC
//ADD TO FAV TOPICS LIST
$(".unfavorited_heart_icon, .favorited_heart_icon").click(function(e) {
e.preventDefault();
//onclick - change colors of heart
if ($(this).hasClass("favorited_heart_icon")) {
$(this).removeClass("favorited_heart_icon");
$(this).addClass("unfavorited_heart_icon");
urlEnd = '/unfavorite';
}
else if ($(this). hasClass("unfavorited_heart_icon")) {
$(this).removeClass("unfavorited_heart_icon");
$(this).addClass("favorited_heart_icon");
urlEnd = '/favorite';
}
// console.log('/topics/favorite/' + id);
$.ajax({
url: '/topics/' + id + urlEnd,
type: 'POST',
success: function(result) {
location.reload();
}
})
});
},
error: function(err) {
console.log(err);
}
})
});
};
},
error: function(err) {
}
});
！
EDIT **
私も試してみた：私はresultsがおよそ20項目であることを推測している
$.ajax({
url: '/topics',
dataType: 'json',
type: 'GET',
success: function(result) {
for(var i = 0; i < result.length; i++) {
var title = result[i].title;
var level = result[i].level;
var id = result[i].id;
var favlink = '/topics/' + id + '/favorite';
var link = '/topics/' + id;
var topicInfo = {title: title, link: link};
var template = compiledTopics(topicInfo);
$('.topic-wrapper').append(template).click(function(e) {
e.preventDefault();
console.log($(this))
});
};
},
あなたはあなたのループ内で合計20人のイベントリスナーを結合している：
私は、概念的にも似たような何かをしようとするだろう。 20件すべてがクリックで呼び出されます。 – Xufox
@ user2267175 ajax呼び出しの前に1つ追加しましたが、1回だけ実行されました。電話の中で何か起きているようです。 – gwalshington
「結果」は約20項目だと推測しています。あなたのforループ内で 'click'イベントハンドラを作成しているときは、' .listing-topics、.favorite-topic-title'クラスにバインドします。要素をクリックすると、クリックイベントが発生します（結果の配列に20項目あるので20回）。私はこれが起こっていると思うが、確認するためにそれを見る必要がある。あなたはJSFiddleを持っていますか？ – mwilson