如果條件在點擊事件中，jQuery停止腳本執行

Question

在這個表中，行只有在Approved時纔可選擇？列是空的。用戶還可以在「拒絕原因」列中添加文本。

單擊拒絕按鈕時，我想要確保所有選定的行中填充所有拒絕原因，然後才能執行其餘的操作。我試圖使用return false,e.stopPropagation(),e.stopImmediatePropagation()，並沒有這些作品。正如你在我的例子中看到的，alert("test")將一直執行。我想阻止它。你能幫忙嗎？

$(function() { 
 

 
    var table = $("#myDataTable").DataTable({ 
 
     info: false, 
 
     paging: false, 
 
     searching: false, 
 
     sorting: false 
 
    }); 
 

 
    $("#myDataTable tbody").on('click', 'tr', function() { 
 
     var tr = $(this).closest("tr"); 
 
     var rowText = tr.children("td").text(); 
 
     var approveDeny = tr.children("td:nth-child(2)").text(); 
 

 
     if (approveDeny == "") { 
 
      $(this).toggleClass('selected'); 
 
     } 
 
    }); 
 

 
    $("#myDataTable tbody tr td:nth-child(4)").click(function(e) { 
 
     if ($(this).prev().prev().text() == "") { 
 
      var text = $(this).text(); 
 
      $(this).text(''); 
 
      $('<textarea />').appendTo($(this)).val(text).select().blur(function() { 
 
       var newText = $(this).val(); 
 
       var parentCell = $(this).parent(); 
 
       parentCell.find('textarea').remove(); 
 
       table.cell(parentCell).data(newText).draw(); 
 
      }); 
 
     } 
 
     e.stopPropagation(); 
 
    }); 
 

 
    $("#btnDeny").click(function(e) { 
 
     table.cells('.selected',3).every(function(rowIdx, tableLoop, rowLoop) {   \t 
 
      var data = this.data(); 
 
      if(data == "") {    \t 
 
      \t alert(rowIdx + " is empty, you have to fill it."); 
 
       return false; 
 
      } 
 
      console.log(data); 
 
     });   
 
     alert("test"); 
 
    }); 
 

 

 
});

<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script> 
 
<table id="myDataTable" class="table"> 
 
    <thead> 
 
     <tr> 
 
      <th>Name</th> 
 
      <th>Approved?</th> 
 
      <th>Date</th> 
 
      <th>Deny Reason</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr id="1"> 
 
      <td>Mickey Mouse</td> 
 
      <td>Yes</td> 
 
      <td>1/1/2016</td> 
 
      <td></td> 
 
     </tr> 
 
     <tr id="2"> 
 
      <td>Minnie Mouse</td> 
 
      <td></td> 
 
      <td>1/3/2016</td> 
 
      <td></td> 
 
     </tr> 
 
     <tr id="3"> 
 
      <td>Donald Duck</td> 
 
      <td></td> 
 
      <td>1/5/2016</td> 
 
      <td></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
<br/> 
 
<div> 
 
    <input type="button" id="btnApprove" value="Approve"> 
 
    <input type="button" id="btnDeny" value="Deny"> 
 
</div>

Answer 1

您可以使用一個變量你內心.every()功能的範圍之外，並在該函數內改變，所以你知道，如果該數據是否有效。

$("#btnDeny").click(function(e) { // Outer scope function 
    var valid = true; 
    table.cells('.selected',3).every(function(rowIdx, tableLoop, rowLoop) { // inner scope function  
     var data = this.data(); 
     if(data == "") { 
      valid = false; 
      alert(rowIdx + " is empty, you have to fill it."); 
     } 
    }); 
    if (valid) 
     alert("Data valid"); 
}); 

Answer 2

右鍵，您需要分配的每一個布爾輸出（）給一個變量，然後執行您的警報只有當變量是真。現在，every（）調用的結果將被忽略，並且無論如何都會執行警報。喜歡的東西：

var isValid = table.cells('.selected',3).every(function(rowIdx, tableLoop, rowLoop) { 
    var data = this.data(); 
    if(data == "") {     
     alert(rowIdx + " is empty, you have to fill it."); 
     return false; 
    } 
    console.log(data); 
}); 
if (isValid) { 
    alert("test"); 
}