PHP variable as part of a jQuery function doesn't work, but plain text does
<p>I have the following jQuery code in my PHP file <em>(edited Jan 19 2010 @ 10:40 MST)</em>:</p>

<pre><code>&lt;?php
   $count = 0;
   foreach($attachments as $attachment) :
      echo '&lt;script type="text/javascript"&gt;
               $(\'#a_'.$count.'\').click(function() {
                  $(\'#d_'.$count.'\').show(200);
               });

               // if "no" is clicked
               $(\'#d_'.$count.' .no\').click(function() {
                  $(\'#d_'.$count.'\').hide(200);
               });

               // if "yes" is clicked
               $(\'#d_'.$count.' .yes\').click(function() {
                  $(\'#d_'.$count.'\').hide(200);

                  // update database table -- this is why I need the script inside the for loop!
                  var jsonURL = \'http://path/to/update_db_script.php\';
                  $.getJSON(jsonURL, {\'post_id\' : '.$attachment-&gt;ID.'}, function(data) {
                     alert(\'Thank you. Your approval was received.\');
                  });
                  $(\'#a_'.$count.'\').replaceWith(\'&lt;span&gt;Approved&lt;/span&gt;\');
               });
            &lt;/script&gt;';

      echo '&lt;li&gt;';
         if($attachment-&gt;post_excerpt == 'approved') {
            // Check the proof's status to see if it reads "approved"
            echo '&lt;span&gt;Approved&lt;/span&gt;';
         } else { ?&gt;
            // If not yet approved, show options
            &lt;a class="approve" id="a_&lt;?php echo $count; ?&gt;" href="#"&gt;Click to Approve&lt;/a&gt;
            &lt;div class="confirm-approval" id="d_&lt;?php echo $count; ?&gt;"&gt;
               &lt;p&gt;Please confirm that you would like to approve this proof:&lt;/p&gt;
               &lt;a class="yes" href="#"&gt;Yes, I approve&lt;/a&gt;
               &lt;a class="no" href="#"&gt;No, not yet&lt;/a&gt;
            &lt;/div&gt;&lt;?php
         } ?&gt;
      &lt;/li&gt;
   &lt;?php $count++;
endforeach; ?&gt;
</code></pre>

<p><a href="http://www.usfoldercompany.com/wordpress/proofs/" rel="nofollow">The page in question is available here</a>. The "click to approve" links do not work (that's my problem).</p>

<p>When I view source, the PHP variables appear to have echoed properly inside the jQuery:</p>

<pre><code>&lt;script type="text/javascript"&gt;
   $('#a_0').click(function() {
      $('#d_0').show(200);
   });
   ... etc ...
&lt;/script&gt;
</code></pre>

<p>This looks correct, but nothing happens when I click any of the links. However, <strong>when I replace the PHP echo statements with plain numbers (0, 1, etc.) the click functions work as expected</strong>.</p>

<p>You may be asking: <em>why on earth do you have this inside a for loop?</em> The reason is that I need to retrieve the <strong>attachment->ID</strong> variable and pass it to an external PHP script. When someone clicks "approve" and confirms, the external script takes the attachment->ID and updates a database value to read "approved".</p>

<p><strong>Why won't the click function fire when PHP is in place?</strong> Is there some kind of greater force at work here (e.g., hosting limitation), or am I missing a fundamental piece of how PHP and JavaScript interact?</p>
