Question

I am using a masonry type code to display Divs on my page, and using an API to get the data so everything is loaded via html+= into the DOM.

e.g. Each div is loaded like this

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

Now, I am using a like button within the results shown which uses ajax to update my database to allow the user to see what they have liked. Simple.

So, to get the ajax code into play I have to load it into the DOM which I do as below, I load this after the divs example shown above:

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

Now, when a user clicks like, or unlike, it fires twice, therefore hitting the DB twice and basically doubling the whole workload which is never good.

So, I’m thinking that maybe the script shown above has been loaded into the DOM twice. So I go to firefox firebug and look at the code loaded into the DOM. All the divs are there that I loaded using the same html+= but not the script above. I know its there as it works prefectly.

So why can I not see it, and why is it firing twice?

Is there a better way to do this?

EDIT:

This is the API which loads the page:

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
  });
};

Answer 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.