Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I trigger a change in JQuery?
    text
    copied!<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="https://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>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload