Question

am a newbie with jquery .. i have this html code

<div id='input'>
<table>
    <tr>
    <td class="number">
    <input><input><input><input><br>
    </td>
    <td style="vertical-align:bottom"><button>+</button></td>
    </tr>
    <tr>
    <td class="number">
    <input><input><input><input><br>
    </td>
    <td style="vertical-align:bottom"><button>+</button></td>
    </tr>
</table>
</div>

and for my script part

jQuery.fn.vcenter = function(parent) {
    if (parent) {
        parent = this.parent();
    } else {
        parent = window;
    }
    this.css({
        "position": "absolute",
        "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px"),
    });
return this;
}
jQuery.fn.hcenter = function(parent) {
    if (parent) {
        parent = this.parent();
    } else {
        parent = window;
    }
    this.css({
        "position": "absolute",
        "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
    });
return this;
}
jQuery.fn.center = function(parent) {
    if (parent) {
        parent = this.parent();
    } else {
        parent = window;
    }
    this.css({
        "position": "absolute",
        "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
        "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px"),
    });
return this;
}
$(document).ready(function(){
$("#input").vcenter(true);
});
$("#input:button").click(this.parent().prev().html()+="<input><input><input><input><br>");

what am trying to do basically is each time i click on a button inside the element that has the id “input”
the script executes the following : the script goes to the parent element (the ) then the previous sibling ! then add to its html inner the following : "<input><input><input><input><br>"
i have done my homework ! and i need help ! what’s wrong here ?

Answer 1

The .click() handler takes a function as its parameter.

So

$("#input button").click(this.parent().prev().html()+="<input><input><input><input><br>");

would become

$("#input button").click(function(event) {
    var old_html = $(this).parent().prev().html();
    $(this).parent().prev().html(old_html+"<input><input><input><input><br>");
});