Question

我知道这个主题之前已经被问了很多但是我读了很多stackoverflow帖子并且无法弄明白。要么我犯了一个愚蠢的错误，要么使用错误的代码。在任何情况下，我都会欣赏其他眼睛。

我的代码实际上很简单。元素被拖入框中，我希望用户能够关闭拖动的框，以便他们可以重做拖动。

  <div id="questionContainer">

  <div class='row-fluid'>
      <div class='span3 box-content'>
        <div class="box span12">
            <input type="text" placeholder="Column 1" />
        </div>
        <div class="box span12  groupBoxes">
        </div>
      </div>

      <div class='span3 box-content'>
        <div class="box span12">
            <input type="text" placeholder="Column 2" />
        </div>
        <div class="box span12  groupBoxes">
        </div>
      </div>

      <div class='span3 box-content'>
        <div class="box span12">
            <input type="text" placeholder="Column 3" />
        </div>
        <div class="box span12  groupBoxes">
        </div>
      </div>

      <div class='span3 box-content'>
        <div class="box span12">
            <input type="text" placeholder="Column 4" />
        </div>
        <div class="box span12 groupBoxes">
        </div>
      </div>
  </div>

然后有javascript附加拖动的元素。我在那里有一个.on（）函数根本不起作用。

    $( ".groupBoxes" ).droppable({
      accept: ".sDrag",
      drop: function( event, ui ) {
        var studentID = $(ui.draggable).attr('Uid'); 
        var studentName = $(ui.draggable).find(".sName").text();
        console.log(studentID + ' ' + studentName); 

         var dropbox = "<div class='box questionBox' Uid='"+studentID+"' ><div class='box-content box-statistic'><h3 class='title text-error'>"+studentName+"</h3><div class='icon-remove align-right card-remove' style='font-size:12px'></div></div> </div>";

          $(this).append(dropbox);


      }
    });

$("#questionContainer").on('click', '.card-remove',  function () {
    console.log('hi');
    var student = $(this).parent('.questionBox').attr('Uid'); // get user number
    var box = $(".studentBox[value='"+student+"']")// find the original object through user
    box.removeClass('muted-background').addClass('sDrag');// back in the original object, add class sDrag and remove class muted-background
    // remove the object clicked

});

关于这里出了什么问题的任何想法？

Answer 1

尝试在函数外定义dropbox

var dropbox;
    $( ".groupBoxes" ).droppable({
  accept: ".sDrag",
  drop: function( event, ui ) {
    var studentID = $(ui.draggable).attr('Uid'); 
    var studentName = $(ui.draggable).find(".sName").text();
    console.log(studentID + ' ' + studentName); 

      dropbox = "<div class='box questionBox' Uid='"+studentID+"' ><div class='box-content box-statistic'><h3 class='title text-error'>"+studentName+"</h3><div class='icon-remove align-right card-remove' style='font-size:12px'></div></div> </div>";

      $(this).append(dropbox);


  }
});

$("#questionContainer").on('click', '.card-remove',  function () {
    console.log('hi');
    var student = $(this).parent('.questionBox').attr('Uid'); // get user number
    var box = $(".studentBox[value='"+student+"']")// find the original object through user
    box.removeClass('muted-background').addClass('sDrag');// back in the original object, add class sDrag and remove class muted-background
    // remove the object clicked

});

不能让.on（）去工作

1 个答案: