How do I trigger a change in JQuery?
<p>I'm new to JQuery, so this is probably a very dumb question. </p>

<p>I've used JQuery to make the elements in a table draggable. I asked <a href="http://stackoverflow.com/questions/552951/how-can-i-make-my-jquery-draggable-droppable-code-faster">a question</a> about how to make it faster, and the best response I had so far was to disable droppable for all the cells, and only enable them when something is being dragged.</p>

<p>Actually, for me, this makes a lot of sense as I only want to be able to drag a cell onto another cell in the same row. So I only need to apply droppable to the cells in the same row. So, I do this:</p>

<pre><code>$(document).ready
(
  function()
  {
    $('.draggable_div').draggable
    (
      {
        addClasses: false,
        scroll: false,
        axis: 'x',
        start: function(event, ui)
        {
          $(this).css('background-color','#ddddff');
          var $cells = $(this).parent().parent().children();
          $cells.addClass("droppable_td");
        }
      }
    );

...
</code></pre>

<p>Firebug is telling me that I've successfully added the "draggable_td" class to the cells in the right row. But how do I make that trigger the change? The way I have the code set up at the moment, droppable is attached like this:</p>

<pre><code>  $('.droppable_td').droppable
  (
    {
      addClasses: false,
      over: function(event, ui)
      {
        $(this).css('background-color', '#ccffcc');
      },
      out: function(event, ui)
      {
        $(this).css('background-color', null);
      },
      drop: function(event, ui)
      {

etc...
</code></pre>

<p>I know that code works, because if I put that class in the appropriate &lt; td> elements in the HTML it all works (just very slowly).</p>

<p>In other words: If I have all cells droppable from the start, it works. How can I dynamically change a cell to make it droppable as a result of an event?</p>
