CODEWITHSUNDEEP
javascriptjquery
dmitriy
dmitriy

Reputation: 488

function doesn't want to fire

I don't understand why the check() function doesn't want to fire, I know that if I set this function to setInterval(check, 1000) or to function $("#btn-click") it will work but why it doesn't work now? I would appreciate if you explain me

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

Upvotes: 0

Views: 63

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65806

check() is firing. It's just not doing anything because of your if logic, which had bad selectors pointing to elements (tbody, td) that you don't have.

You won't get a td element in your table until AFTER you click btn-save because that click event handler creates the td elements. Your code wants to run check before that button gets clicked.

I've removed the reference to tbody and changed your td reference to th and now it works:

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

Upvotes: 0

xShirase
xShirase

Reputation: 12389

The function fires, but there's no td element to attach events to.

If you want to bind events to elements that will be dynamically generated, you do not need a check function, just use $(body').on(evtType,selector,handler)

Check below for an example. every td you'll add dynamically will still be bound to the event listener, because it's attached to '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>

Upvotes: 2

Related Questions