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

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>

Answers


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.


Need Your Help

Ordering in vendor based CSS3 Vs Standard CSS3 syntax

css css3 vendor-prefix

In order to achieve cross-browser compatibility, we tend to use both vendor specific extensions and standard CSS3 syntax. I know CSS3 is still in draft, but we have already started using it. But the

How/where to create a shared method out of jquery/erb code?

javascript jquery ruby-on-rails coding-style erb

In my rails 3.1 app I've added update.js.erb, create.js.erb, and destroy.js.erb templates to handle javascript requests, and everything is working great. These each have similar chunks of code that...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.