2016-12-02 18 views
0

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>

+0

'チェック()'絶対に罰金発射される - あなたの問題は何の 'テーブルのtbody trののtd'要素が存在しないということですので、あなたは、任意のクリックイベントハンドラを追加していません。また、 'e.target' /' tar.is() 'チェックは冗長です。彼らはいつも一致します –

+0

*機能は発射したくない*その後、それをR.I.P. – Rajesh

答えて

2

機能の火災は、これだけにイベントをアタッチする一切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>

0

check()が発射された私を説明する場合、私は幸いです。あなたが持っていない要素(tbodytd)を指す悪いセレクタを持っていたあなたのifロジックのために何もしないだけです。

btn-saveをクリックしてからclickイベントハンドラがtd要素を作成するまで、テーブルにtd要素が表示されることはありません。そのボタンがクリックされる前にコードでcheckを実行したいとします。

私はtbodyへの参照を削除し、thにごtd参照を変更し、今それが動作しました:

$(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>

関連する問題