error using .on in an external js file - jquery 1.7.2

Question

I created an external JS file for this code:

$(document).ready(function () {
  $(document).on("click", '.siteusemore', function ()
  //$('.siteusemore').on("click",function() 
  {
    var ID = $(this).attr("id");
    if (ID) {
      $("##siteusemore" + ID).html('<img src="/images/processing.gif" />');
      $.ajax({
        type: "POST",
        url: "/ajax_results.cfm?rpp=#url.rpp#&ajax_type=my_profile&status_action=#url.status_action#&comments_action=#url.comments_action#&myscript=#urlencodedformat(arguments.myscript)#",
        data: "lastmsg=" + ID,
        cache: false,
        success: function (html) {
          $("ol##siteuseupdates").append(html);
          $("##siteusemore" + ID).remove();

        }
      });
    } else {
      $(".siteusemorebox").html('The End');
    }
    return false;
  });

  $(document).on("click", '.teamsusemore', function ()
  //$('.teamsusemore').live("click",function() 
  {
    var ID = $(this).attr("id");
    if (ID) {
      $("##teamsusemore" + ID).html('<img src="/images/processing.gif" />');
      $.ajax({
        type: "POST",
        url: "/ajax_results.cfm?rpp=#url.rpp#&ajax_type=my_teams&myscript=#urlencodedformat(arguments.myscript)#",
        data: "lastmsg=" + ID,
        cache: false,
        success: function (html) {
          $("table##grouplisting").append(html);
          $("##teamsusemore" + ID).remove();

        }
      });
    } else {
      $(".teamsusemorebox").html('No more records.');
    }
    return false;
  });

  $(document).on("click", '.teamsusemore', function ()
  //$('.leaguesusemore').live("click",function() 
  {
    var ID = $(this).attr("id");
    if (ID) {
      $("##leaguesusemore" + ID).html('<img src="/images/processing.gif" />');
      $.ajax({
        type: "POST",
        url: "/ajax_results.cfm?rpp=#url.rpp#&ajax_type=my_leagues&myscript=#urlencodedformat(arguments.myscript)#",
        data: "lastmsg=" + ID,
        cache: false,
        success: function (html) {
          $("table##leaguelisting").append(html);
          $("##leaguesusemore" + ID).remove();

        }
      });
    } else {
      $(".leaguesusemorebox").html('No more records.');
    }
    return false;
  });
});

when I call it it throws a script error in jquery 1.7.2.min.js

Line: 3 Error: Syntax error, unrecognized expression: #

The purpose of the script is to all three separate ajax events that occur on the page.

<div id="siteusemore#evaluate(currentpage + 1)#" class="siteusemorebox">    
    <a href="##" class="siteusemore" id="#evaluate(currentpage + 1)#">View more items</a>
</div>

Uh for starters you find an element by ID with one hash, not two in a row like that. — Kansha, Jan 23 '13 at 23:51
You'll have to use [valid `id`s](http://stackoverflow.com/a/79022/) before you can use `jQuery` properly to select them. Either that or you'll have to resort to using less-performant selectors: `'[id="#siteusemore' + ID + '"]'` — Jonathan Lonowski, Jan 24 '13 at 00:03

score 2 · Answer 1 · answered Jan 23 '13 at 23:59

2

You're going to have problems with that many hash in a selector. The problem is that jQuery uses the '#' to look for something with that ID. Trying to read it from jQuery's point of view, you're trying to tell it to find something with the ID of siteusemore AND the ID of evaluate(currentpage + 1) AND then ID of... well, nothing, because the hash at the end wouldn't make sense. I would remove the hash and the parentheses from your IDs and try again.

answered Jan 23 '13 at 23:59

Coronus

570
5
25

the double pound signs are a result of coldfusion. they are not outputted that way. – Jeffrey Shain Jan 24 '13 at 16:47
the issue is the code works perfectly when its not relegated to an external JS call. (script src="urltojsfile"). Its only when i put it in an external js does the jquery error occur. – Jeffrey Shain Jan 24 '13 at 16:50

error using .on in an external js file - jquery 1.7.2

1 Answers1