0

石積みタイプのコードを使用してページに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
  });
};
4

1 に答える 1

1

<script>したがって、タグを追加してラッピングを削除するのではなく、JavaScriptを起動するだけです。これは、DOMの準備ができたときに、1回だけ発生するreadyイベントで$(function(){...})のみ内部のコードが実行されるためです。

于 2013-01-19T08:41:37.223 に答える