Javascript function doesn't work when creating a new HTML element

Question

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.

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
– GolezTrol, Commented Nov 10, 2013 at 11:22
What is this, the "how many false premises can we fit into a single sentence" game? — Ant P
– Ant P, Commented Nov 10, 2013 at 11:23
@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
– CodingIntrigue, Commented Nov 10, 2013 at 11:23
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
– CodingIntrigue, Commented Nov 10, 2013 at 11:30

Niet the Dark Absol · Accepted Answer · 2013-11-10 11:22:48Z

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 ^_^

answered Nov 10, 2013 at 11:22

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript function doesn't work when creating a new HTML element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related