CODEWITHSUNDEEP
javascriptjquery
Get Off My Lawn
Get Off My Lawn

Reputation: 36341

clicking on a table cell reruns the jquery

I have this jsFiddle: http://jsfiddle.net/4wyDA/1/

I have it setup to when you click on a table cell it adds a textbox to it, but the problem I am having, is that you can't edit the text in the textbox once you click on the table cell I have tried e.stopPropagation() but that doesn't work.

Here is what is supposed to happen: 1) Someone clicks on the table cell, all other cells that have an input/textarea should remove the input/textarea and place the text back in the cell (works), 2) the clicked on cell should populate with an input/textarea with the text from the cell (works). Finally the user should be able to click on the buttons and edit the text in the input/textarea (doesn't work it keeps running steps 1 and 2).

$(".editable").click(function(e) {
    $(".editable").each(function() {
        if ($(this).has("input")) {
            var v = $(this).children("input.input, textarea").val();
            $(this).text(v);
        }
    });

    var type = $(this).attr("data-type");

    var val = $(this).text();
    if (type === "text" || type === "date") {
        str = '<input type="text" class="input" style="width: 100%;" value="' + val + '" /><br />';
    }
    str += '<input type="button" value="Save" />';
    str += '<input type="button" value="Cancel" />';

    $(this).html(str);
});

$(document).on("click", ".editable input", function(e){
    e.stopPropagation();
});

Upvotes: 2

Views: 134

Answers (3)

Wellington Zanelli
Wellington Zanelli

Reputation: 1964

Suggestion: Can you change your click event to double click? This will solve your problem. I mean something like this:

Instead of:

$(".editable").click(function(e) {

Use:

$(".editable").dblclick(function(e) {

Always when I see editable tables, they use double click.

Your demo changed

Upvotes: 0

Peter Rasmussen
Peter Rasmussen

Reputation: 16942

You can stop the element with the .editable class from removing the input, by adding the following code to the start of your event:

$(".editable").click(function(e) {
    if (e.target.className === 'input')
       return;
    //rest of code

DEMO

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

Instead remove the separate click event for the input and check for the target element in the .editable click event itself..

$(".editable").click(function (e) {
        if (!$(e.target).is('input')) {
           // your code when 
        }
        else {

           // something else
        }
});

Upvotes: 4

Related Questions