點擊錨點意外調用alert（）

Question

我有一些代碼從服務器（ajax）檢索用戶，我使用一些<a>標籤來顯示它，當你用戶點擊<a>標籤時，它應該添加它到一個數組in_group。第一個工作，第二個去alert()功能，還將用戶添加到數組中，這使我感到困惑。刪除按鈕也不起作用。我究竟做錯了什麼？我希望只有在不存在的情況下才將用戶添加到in_group陣列中，並在按下該按鈕時將其刪除。

var in_group = []; 

$("#students-body").on('click', 'a', function() { 
    var modal = $("#manageGroupMembers"); 

    var student_id = $(this).attr('student-id'); 
    var student_name = $(this).html(); 
    var student = { 
     id: student_id, 
     name: student_name 
    }; 


    console.log(in_group.length); 

    if (in_group.length > 0) 
    { 
     for (i = 0; i < in_group.length; i++) 
     { 
      console.log(in_group[i].id); 
      if (in_group[i].id === student_id) 
      { 
       alert('in grp'); 
       return; 
      } 
      else 
      { 
       in_group.push(student); 
      } 
     } 

    } 
    else 
    { 
     in_group.push(student); 
    } 


    RefreshGroup(); 
    //modal.modal('hide'); 
}); 

function RefreshGroup() 
{ 
    var students_group = $("#students-group"); 
    var html = ""; 

    if (in_group.length > 0) 
    { 
     for (i = 0; i < in_group.length; i++) 
     { 
      html += "<span>"+in_group[i].name+"</span>"; 
      html += "<button class='btn btn-danger' onclick='event.preventDefault();RemoveFromGroup("+i+")'>x</button>"; 
     } 

     students_group.append(html); 
    } 
} 

function RemoveFromGroup(index) { 
    in_group.splice(index, 1); 
    RefreshGroup(); 
} 

HTML：

<div class="form-group"> 
    <label for="group_members">Members</label> 
    <button class="btn btn-primary" style="display: block;" onclick="event.preventDefault()" id="add-student-btn">Add Member</button> 
    <div id="students-group"></div> 
</div> 

模態：

<!-- Modal --> 
<div class="modal fade" id="manageGroupMembers" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Add Member to Group</h4> 
      </div> 
      <div class="modal-body"> 

       <div id="students-body"></div> 
       <div id="pagination-students"></div> 

      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

    </div> 
</div> 

Answer 1

那是因爲你被插入在該id for循環。更改您的代碼：

...your code before this.... 
var student_id = $(this).attr('student-id'); 
var student_name = $(this).html(); 
var student = { 
    id: student_id, 
    name: student_name 
}; 

var index = in_group.findIndex(function(std) { 
    return std.id == student.id; 
}); 

if(index === -1) { 
    in_group.push(student); 
} else { 
    alert('student was already in array') 
} 

這樣，您檢查學生是否在數組內。如果不是（-1），則插入它。否則您會提示

Answer 2

在代碼的這一部分，您正在循環使用in_group數組來查找具有特定ID的學生條目。

if (in_group.length > 0) 
{ 
    for (i = 0; i < in_group.length; i++) 
    { 
     console.log(in_group[i].id); 
     if (in_group[i].id === student_id) 
     { 
      alert('in grp'); 
      return; 
     } 
     else 
     { 
      in_group.push(student); 
     } 
    } 

} 
else 
{ 
    in_group.push(student); 
} 

RefreshGroup(); 

如果你找到它，你alert它，然後就停止循環和整個功能。如果你不要找到它，你推它，但你不打破循環。您繼續循環，檢查in_group[i].id === student_id被重新執行並且alert也被執行。

然後，您可以在致電RefreshGroup後添加return;，爲什麼不擺脫循環並讓事情變得更簡單？

let isInGroup = in_group.find(studentEntry => studentEntry.id === student_id); 

if(isInGroup){ 
    alert("in grp"); 
} 
else{ 
    in_group.push(student); 
    RefreshGroup(); 
} 

這將完全取代上述部分，它將工作。

---

至於爲何拆除不起作用：

1. event沒有定義。它可能會產生一個ReferenceError。 （您的其他<button>同樣的問題。）
2. 而是內嵌的事件屬性，看看事件代表團和標準事件偵聽器（jQuery的有click方法，使用它！）
3. 查找到data-屬性或jQuery的data舉行指數的價值。

事件委託看起來是這樣的：

var students_group = $("#students-group"); 
students_group.on("click", "button", function(e){ 
    RemoveFromGroup($(this).attr("data-index")); 
}); 

，然後生成HTML時：

html += "<button class='btn btn-danger' data-index='" + i + "'>x</button>"; 

---

我也建議你閱讀有關Array.prototype方法，特別是迭代方法。