Home/ Questions/Q 640207
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T20:55:40+00:00

The code below is (hopefully) a minimized testcase of my original problem. I’m trying

  • 0

The code below is (hopefully) a minimized testcase of my original problem. I’m trying to set up a system where you drag list items from the left menu (draggable items) and then drop’em to the box on the right hand side. Once they’re dropped, you should be able to click the “draggable item” text and expand their fieldsets.

The problem is, however, that once you have dropped the items and clicked to expand them (say you have 3 items), the first one will give you 3 alert boxes, the second one will give you 2 and the last one will only give you 1. In other words, from the top, it will give you x alert boxes (where X is the number of items).

Looking at the code, I really can’t figure out why this happens, other than it seems that having the .click stuff inside stop: seems to be related, given the fact that the example on http://api.jquery.com/click/ works fine.

(BTW: The stuff inside the alert box is supposed to be the ID of the item you clicked.)

Any ideas?

<!doctype>
<html>
 <head>
  <title>testcase</title>

  <style type="text/css">
   body { padding: 50px; font-family: Arial; font-size: .9em }
   #column, #data { float: left }
   #column { width: 13% }
   ul, ol { padding: 0; border: 0 }
   li { list-style: none }

   .droptarget { padding: 10px; border: 1px solid #999; height: 10px; width: 350px; margin-right: 1.2% }
   .ui-draggable-dragging, .ui-sortable-helper { background: #f90; width: 100px; display: block }
  </style>

  <script src="http://code.jquery.com/jquery-1.4.1.js" type="text/javascript" charset="utf-8"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>

  <script type="text/javascript">
   function hideAllElements() {
    var elements = $('.dtContent');
    var elementsLength = elements.length

    for (var j = 0; j < elementsLength; j++) {
     elements[j].style.display = 'none';
    }
   }

   var randNum = 0;

   function randNoDups() {
    tmpRand = randNum;

    while (tmpRand == randNum) {
     tmpRand = Math.round(Math.random() * 50000000);
    }

    randNum = tmpRand;
    return tmpRand;
   }

   $(function () {
    var i = 0;

    $(".draggable").draggable({
     connectToSortable: ".sortable",
     helper: 'clone'
    });

    $(".contentGroupList").sortable({
     connectWith: '.contentGroupList',

     stop: function (event, ui) {
      var currentId = ui.item.children(0).attr('id');
      var currentNumber = currentId.split("dt");
      var randomKey = randNoDups();

      ui.item.children(0).attr({
       id: ui.item.children(0).attr('id') + randomKey
      });

      if ((i + 1) == $('.droptarget').children().size()) {
       hideAllElements();

       var $formContainer = $('<fieldset>').addClass('dtContent').attr({
        id: 'fs' + currentNumber[1] + randomKey
       });

       var $table = $('<table>').appendTo($formContainer);
       var $submit = $('<input>').attr({type: 'submit'}).appendTo($formContainer);

       ui.item.append($formContainer);
       ui.item.attr({id: 'listItem' + i});

       $("span").click(function () { alert($(this).attr('id')); });
       i++;
      }
     }
    });
   });
  </script>
 </head>
 <body>
  <div id="column">
   <ul id="draggables">
    <li class="draggable"><span class="dt" id="dt0">Draggable item</span></li>
   </ul>
  </div>
  <div id="contentGroups-1" class="contentGroup">
   <ul class="droptarget sortable contentGroupList"></ul>
  </div>
 </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is probably here:

    $("span").click(function () { alert($(this).attr('id')); });

    This will find every span in the document and alert it’s id. Try using the ui object instead:

    ui.item.click(function() {
    alert(this.id);
});
    • 0