Question

I’m working on a Chrome Extension, and the click() method I’m calling on an only works after I paste it in the Extension Inspector’s Console.

The markup is like so:

<ul id="results-list">
  <li><a href="#">something</a></li>
  <li><a href="#">something</a></li>
  ... and so on ...
</ul>

So, nothing fancy, really. However, those <li><a>...</a></li>‘s is being populated based on json data returned from a form submit. So, I think it has something to do with the elements not being there onReady(), but I’ve tried many times to put the anonymous method (below) inside onReady, outside onReady, and inside & outside onSubmit, and still no luck.

My jQuery is the following:

$(document).ready(function(){
  $('form').submit(function(){
    ... make the JSON request & populate the form ...
  });
  $("#results-list a").click(function(){
    $('body').width(600);
    return false;
  });
});

Anyone have any insight to this? I’m thinking it’s either the location of my .click() method, or a Chrome Extensions gotcha I don’t know about.

Thank you!

Answer 1

Move your event into your callback since the part of the DOM you’re trying to access isn’t available until it comes back from the server:

$(document).ready(function(){
  $('form').submit(function(){
    // ... make the JSON request & populate the form ...

    $.ajax({
      url: yourUrl,
      data: yourData,
      success: function(data) {
        // Build your list and then:
        $("#results-list a").click(function(){
          $('body').width(600);
          return false;
        });
      }
    });
  });
});