함수가 실행되기를 원하지 않는다.

나는 왜 check() 함수가 실행되기를 원하지 않는지 이해할 수 없다.이 함수를 setInterval(check, 1000)으로 설정하거나 $("#btn-click")으로 설정하면 작동하지만 작동하지 않는 이유는 알고있다. 지금? 당신이 나에게 함수가 실행되기를 원하지 않는다.

출처

2016-12-02 Dima Vleskov

'체크()'절대적으로 미세 발포 - 당신은 모든 클릭 이벤트 처리기를 추가하지 않을 귀하의 문제는 더'테이블 TBODY의 그럴 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() 이 발사됩니다

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

을 설명 있다면 감사하겠습니다. 당신이 가지고 있지 않은 요소 ( tbody, td)를 가리키는 나쁜 선택자를 가진 논리 인 if 때문에 아무 일도하지 않고 있습니다.

당신은 그 click 이벤트 핸들러가 td 요소를 생성하기 때문에 당신이 btn-save을 클릭 완료 될 때까지 테이블에 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>

출처

2016-12-02 14:19:03

함수가 실행되기를 원하지 않는다.

답변

관련 문제