石積みタイプのコードを使用してページにDivを表示し、APIを使用してデータを取得し、すべてがhtml+=
DOMに読み込まれるようにしています。
たとえば、各divは次のように読み込まれます
html += '<li><div class="classname>content';
html += '<div id="like'+image.article_id+'">';
html += '<a href="#" class="like" id="'+image.article_id+'">';
html += '<div class="bLike" title="Like this article"></div></a></div>';
html += '<div id="unlike'+image.article_id+'" style="display:none;">';
html += '<a href="#" class="unlike" id="'+image.article_id+'">';
html += '<div class="bUnlike" title="Unlike this article"></div></a></div>';
html += '</div></li>';
現在、表示されている結果内で「いいね」ボタンを使用しています。このボタンは、ajaxを使用してデータベースを更新し、ユーザーが気に入ったものを確認できるようにします。単純。
したがって、ajaxコードを機能させるには、以下のようにDOMにロードする必要があります。これは、上記のdivの例の後にロードします。
html += '<script type="text/javascript">';
html += '$(function()';
html += '{';
html += '$(".like").click(function(){';
html += 'var element = $(this);';
html += 'var I = element.attr("id");';
html += 'var info = \'wish_id=\' + I;';
html += '$(\'#like\'+I).hide();';
html += '$(\'#unlike\'+I).show();';
html += '$.ajax({';
html += 'type: "POST",';
html += 'url: "/pages/includes/ajax/like.php",';
html += 'data: info,';
html += 'success: function(){';
html += '}';
html += '});';
html += 'return false;';
html += '});';
html += '});';
html += '</script>';
html += '<script type="text/javascript" >';
html += '$(function()';
html += '{';
html += '$(".unlike").click(function(){';
html += 'var element = $(this);';
html += 'var I = element.attr("id");';
html += 'var info = \'wish_id=\' + I;';
html += '$(\'#unlike\'+I).hide();';
html += '$(\'#like\'+I).show();';
html += '$.ajax({';
html += 'type: "POST",';
html += 'url: "/pages/includes/ajax/unlike.php",';
html += 'data: info,';
html += 'success: function(){';
html += '}';
html += '});';
html += 'return false;';
html += '});';
html += '});';
html += '</script>';
これで、ユーザーが「いいね」または「違う」をクリックすると、2回起動するため、DBに2回ヒットし、基本的にワークロード全体が2倍になります。
したがって、上記のスクリプトがDOMに2回ロードされている可能性があると思います。そこで、firefox firebugにアクセスして、DOMにロードされたコードを確認します。html+=
上記のスクリプトではなく、同じものを使用してロードしたすべてのdivがあります。それが完璧に機能するので、私はそこにそれを知っています。
それで、なぜ私はそれを見ることができないのですか、そしてなぜそれは2回発火するのですか?
これを行うためのより良い方法はありますか?
編集:
これは、ページをロードするAPIです。
function loadData() {
isLoading = true;
$('#loaderCircle').show();
$.ajax({
url: apiURL, // fetches from MySQL
dataType: 'json', // data type
data: {page: page}, // page number so each request brings in next records
success: onLoadData // loads the data which is looped and html+= as at top of post
});
};