jquery function not calling on click

Question

I have a function like so:

last_value = null;
$('td').click(function(e) {
  console.log($(e.target).attr("id"));
  if ($(e.target).is("td")) {
    var the_form = $("#edit-form").detach();
    if (last_value) {
      $("#" + last_value.attr("id")).replaceWith(last_value);
    }

    last_value = $(e.target).clone();
    $(the_form).removeClass("hidden");
    var the_input = $(the_form).find("input.form-control");
    $(the_input).attr("name", $(e.target).attr("id"));
    $(the_input).attr("placeholder", $(e.target).text());
    $(e.target).css('padding-top', 1);
    $(e.target).css('padding-bottom', 1);
    $(e.target).text("");
    $(e.target).append(the_form);
  }
});

This is supposed to take a table cell, and produce an inline form populated with the cell contents, which it replaces. Additionally, code has been added so that when a different cell is clicked, the contents revert to their original values. However, the problem I'm running into is this: suppose I click one cell, A. The form appears the way it should. Then suppose I click cell B. The form then "moves" to that cell, and the contents in cell A revert to their original values. Now suppose I click on cell A again. In this case, not only does the form not appear, it stays in cell B. In fact, the console.log doesn't even fire. What am I doing wrong here?

are you getting any erros? did you try with $('td).on('click', function(){ /* your code */ }); — caramba
– caramba, Commented Aug 5, 2016 at 4:56
Remember if you are performing click event on static html, I mean which is already loaded with DOM. In that case you can use $('td' ).click() but if html snippet created and appended after DOM loaded you should use $('td).on('click', function(){}); — Sunny S.M
– Sunny S.M, Commented Aug 5, 2016 at 5:12
can you prepare jsfiddle for your code if given solution not working — Sunny S.M
– Sunny S.M, Commented Aug 5, 2016 at 5:13
use this for firing click events: $("table").on('click', "td", function(){ /* your code */ }); — Mohammad Akbari
– Mohammad Akbari, Commented Aug 5, 2016 at 5:19

Naim Malek · Accepted Answer · 2016-08-05 05:13:07Z

Try with this

$(document).find('td').on('click',function(e){

           e.preventDefault();
           console.log($(e.target).attr("id"));
           if ($(e.target).is("td")) {
                var the_form = $("#edit-form").detach();
                if (last_value) {
                    $("#" + last_value.attr("id")).replaceWith(last_value);
                }

                last_value = $(e.target).clone();
                $(the_form).removeClass("hidden");
                var the_input = $(the_form).find("input.form-control");
                $(the_input).attr("name", $(e.target).attr("id"));
                $(the_input).attr("placeholder", $(e.target).text());
                $(e.target).css('padding-top', 1);
                $(e.target).css('padding-bottom', 1);
                $(e.target).text("");
                $(e.target).append(the_form);
          }

    });

Hope this will help you.

And the e.preventDefault() actually prevents the form from submitting when the "Submit" button is pressed.
The e.preventDefault() method stops the default action of an element from happening.

Woody1193 · Accepted Answer · 2016-08-06 05:33:37Z

As was suggested in the comments under the OP, (thanks @Mohammad Akbari), changing the code to

$('table').on('click', 'td', function(e){
       console.log($(e.target).attr("id"));
       if ($(e.target).is("td")) {
            var the_form = $("#edit-form").detach();
            if (last_value) {
                $("#" + last_value.attr("id")).replaceWith(last_value);
            }

            last_value = $(e.target).clone();
            $(the_form).removeClass("hidden");
            var the_input = $(the_form).find("input.form-control");
            $(the_input).attr("name", $(e.target).attr("id"));
            $(the_input).attr("placeholder", $(e.target).text());
            $(e.target).css('padding-top', 1);
            $(e.target).css('padding-bottom', 1);
            $(e.target).text("");
            $(e.target).append(the_form);
      }

});

fixes the problem.

Collectives™ on Stack Overflow

jquery function not calling on click

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related