javascript - 无法让 .on() 工作

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

尝试在函数外部定义保管箱

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

});