0

My HTML:

<table id="laboral">
    <tr>
        <td><input type="text" name="start"/></td>
        <td><input type="text" name="end"/></td>
        <td><textarea name="desc"></textarea></td>
        <td><button type="button" onclick="saveRow(this);"> + </button></td>
    </tr>
</table>

When I press the + button I create a new row exactly as the first one, but the onclick event doesn't work:

Here's the code for saving the values and create the 2 inputs and the textarea:

var button = document.createElement("button");
button.type = "button";
button.setAttribute("onclick", "saveRow(this);")
button.innerHTML = "+";
var btn = tr.insertCell(3);
btn.appendChild(button);

If I examine the result with Firefox I can see that the first button and the new generated have the same code. But the generated doesn't work.

CodesInChaos
  • 106,488
  • 23
  • 218
  • 262
Lloople
  • 1,827
  • 1
  • 17
  • 31
  • 1
    Can you please demo it in jsfiddle or something similar? – Vladimir Kocjancic Nov 10 '13 at 11:16
  • Define "it doesn't work". – Niet the Dark Absol Nov 10 '13 at 11:18
  • If you can, you might switch to JQuery. You can initialize the page with code like this: `$('#laboral').on('click', 'button', saverow);` After that, you just need to add the button. Each of the added buttons will automatically respond to clicks. You might need to make a small changes to saveRow as well. – GolezTrol Nov 10 '13 at 11:18
  • @GolezTrol ***NO***. Such a trivial task should ***NOT*** be done with the obsolete technology that is jQuery. – Niet the Dark Absol Nov 10 '13 at 11:18
  • jQuery is obsolete? What? – Ant P Nov 10 '13 at 11:19
  • What is jQuery's purpose? To iron out browser incompatibilities. Browsers have been compatible for several years now. Therefore jQuery's purpose is obsolete. – Niet the Dark Absol Nov 10 '13 at 11:19
  • 3
    Browsers have been compatible? What? First of all that's not true, second, JQuery is not only for incompatibilities, but especially for making DOM manipulation easier. – GolezTrol Nov 10 '13 at 11:22
  • 2
    What is this, the "how many false premises can we fit into a single sentence" game? – Ant P Nov 10 '13 at 11:23
  • 2
    @AntP He is just trolling, or clearly doesn't work in an environment which produces consumer-facing websites. His original point is correct though, no need for jQuery here. – CodingIntrigue Nov 10 '13 at 11:23
  • @RGraham Actually, I work in [Vanilla JS](http://vanilla-js.com/). I build my own toolbox of specialised functions, and amazingly enough my sites load in a fraction of the time that most sites do. They also work on even the oldest phones, no problem even for their tiny processors. No incompatibilities either, because I *learned JavaScript*. – Niet the Dark Absol Nov 10 '13 at 11:25
  • 2
    Not the place for this. I didn't say that Vanilla JS isn't *possible* it's just that for public-facing websites it's not worthwhile. e.g. I can write a computer program in Assembly. Does that make C, C++, C# obsolete? Definitely not. Does it make life easier? Sure does. No need for elitism here, just useful answers. – CodingIntrigue Nov 10 '13 at 11:30
  • 1
    My own toolbox of JS functions is so good it works even on my old rotary dial phone. Because I learned JavaScript too. – nnnnnn Nov 10 '13 at 11:35

1 Answers1

1

Rather than define an event handler for all the buttons you may add, it may be more efficient to defer it to the table. In this case, you'd do this:

// this script should be placed after the table on the page, or deferred in some way
document.getElementById('laboral').onclick = function(e) {
    e = e || window.event;
    var elem = e.srcElement || e.target;
    if( !elem.tagName) elem = elem.parentNode;
    if( elem.tagName == "BUTTON") {
        var tr = elem;
        // find the row that contains the button
        while(tr.tagName != "TR") tr = tr.parentNode;
        tr.parentNode.insertBefore(tr.cloneNode(true),tr.nextSibling);
    }
};

Done ^_^

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592