不能讓.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

嘗試在函數外部定義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

});