函數不想觸發

我不明白爲什麼check()函數不想觸發，我知道如果我將此函數設置爲setInterval(check, 1000)或功能$("#btn-click")它會工作，但它爲什麼不起作用現在？如果你給我解釋一下函數不想觸發

$(function() { 
 
    $("#field").on("keyup", function() { 
 
    var x = $(this).val(); 
 
    $("#outcome").text(x); 
 
    }); 
 

 
    $("#btn-save").click(function() { 
 
    var name = $("#outcome").text(); 
 
    var x = $("table tbody").append("<tr><td>" + name + "</td></tr>") 
 
    $("#field").val(""); 
 
    $("#outcome").text(""); 
 
    }); 
 

 
    check(); 
 

 
    function check() { 
 
    if ($("table tbody").has("tr")) { 
 
     $("table tbody tr td").on("click", function(e) { 
 
     var tar = $(e.target); 
 
     var b = $(this); 
 
     if (tar.is(b)) { 
 
      b.css("color", "red"); 
 
     } 
 
     }); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <input type='text' id='field'> 
 
    <p>The result is: <span id="outcome"></span></p> 
 
    <span id="btn-save" class="btn-save">save</span> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>Names</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
    </table> 
 
</body>

來源

2016-12-02 Dima Vleskov

'檢查（）'是射擊精絕的 - 你的問題是，有沒有'表TBODY TR td'元素，所以你不加入任何點擊事件處理程序。你的'e.target' /'tar.is（）'檢查也是多餘的。他們將永遠匹配 –

*功能不想開火*然後讓它R.I.P. – Rajesh

功能火災，但沒有將事件附加到TD元素。

如果你想將事件綁定到將動態生成的元素，你不需要檢查功能，只需使用下面$(body').on(evtType,selector,handler)

檢查的例子。您將動態添加的每個td都將綁定到事件偵聽器，因爲它附加到「body」。

$(function() { 
 
    $("#field").on("keyup", function() { 
 
    var x = $(this).val(); 
 
    $("#outcome").text(x); 
 
    }); 
 

 
    $("#btn-save").click(function() { 
 
    var name = $("#outcome").text(); 
 
    var x = $("table tbody").append("<tr><td>" + name + "</td></tr>") 
 
    $("#field").val(""); 
 
    $("#outcome").text(""); 
 
    }); 
 

 
    check(); 
 

 
    function check() { 
 
     console.log('firing') 
 
    } 
 

 
    $('body').on('click', 'table tbody tr td', function(e) { 
 
    var tar = $(e.target); 
 
    var b = $(this); 
 
    if (tar.is(b)) { 
 
     b.css("color", "red"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <input type='text' id='field'> 
 
    <p>The result is: <span id="outcome"></span> 
 
    </p> 
 
    <span id="btn-save" class="btn-save">save</span> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>Names</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
    </table> 
 
</body>

來源

2016-12-02 14:24:01 xShirase

check()被解僱我將不勝感激。它只是沒有做任何事情，因爲你的if邏輯，其中有不好的選擇器指向你沒有的元素（tbody，td）。

直到您單擊btn-save之後，您纔會在表中獲得td元素，因爲該click事件處理程序會創建td元素。您的代碼想在點擊該按鈕之前運行check。

我已經刪除了參考tbody和改變你的td參考th，現在，它的工作原理：

$(function() { 
 
    $("#field").on("keyup", function() { 
 
     var x = $(this).val(); 
 
     $("#outcome").text(x); 
 
    }); 
 

 
    $("#btn-save").click(function() { 
 
     var name = $("#outcome").text(); 
 
     var x = $("table tbody").append("<tr><td>" +name+"</td></tr>") 
 
     $("#field").val(""); 
 
     $("#outcome").text(""); 
 
    }); 
 

 
    check(); 
 
    function check() { 
 
     console.log("HELLO FROM CHECK!"); 
 
     if ($("table").has("tr")) { 
 
      $("table tr th").on("click", function(e) { 
 
       var tar = $(e.target); 
 
       var b = $(this); 
 
       if (tar.is(b)) { 
 
        b.css("color", "red"); 
 
       } 
 
      }); 
 
     } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type='text' id='field'> 
 
     <p>The result is: <span id="outcome"></span></p> 
 
     <span id="btn-save" class="btn-save">save</span> 
 
     <table> 
 
      <thead> 
 
       <tr> 
 
        <th>Names</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
      </tbody> 
 
     </table>

來源

2016-12-02 14:19:03

函數不想觸發

回答

相關問題