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>';

现在，当用户点击喜欢或不喜欢时，它会触发两次，因此会两次访问数据库，并且基本上会使整个工作负载加倍，这从来都不是好事。

所以，我想也许上面显示的脚本已经被加载到 DOM 中两次。所以我去 firefox firebug 看一下加载到 DOM 中的代码。html+=我使用相同但不是上面的脚本加载的所有 div 都在那里。我知道它在那里，因为它工作得很好。

那么为什么我看不到它，为什么它会发射两次呢？

有一个更好的方法吗？

编辑：

这是加载页面的 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

So, what you should do is simply fire JavaScript instead of adding <script> tag and remove $(function(){...}) wrapping, because code inside will be executed only on ready event which fires only once, when DOM is ready.

于 2013-01-19T08:41:37.223 回答