Event binding on dynamically created elements without calling the Event multiple times?

Question

I have a page in which a user can create a poll which can have multiple block, each block can have multiple lines and each line can have multiple fields. When the page is loaded there is one button to add new blocks, one button in block 1 to add new lines to this block and one button to add new fields to line 1 from block 1.

When another line (or block) is created there emerges another button to add new fields to this line (or lines to this block)

With help from this stackoverflow-question i created a function

$('.addLineButton').on('mouseover', function () {
    var button = $(".addLineButton");
    $(button).click(function (e) {
        //Add a new line
    }
}

But the thing is everytime i hover over an addLineButton the function gets initialized another time and when i press the button after hovering it 5 times there are 5 new lines created. When i just use a function like that, the buttons that are created dynamically are not working:

$('.addLineButton').click(function (e) {
    //Add a new line
}

How do i solve this problem, so that every newly created button works and every button only creates one new field/line/block?

Answer 1

I am stupid, sorry for this question.

I just solved my problem by adding onclick="addField(this)"/onclick="addLine(this)"/onclick="addBlock(this)" to all of my existing and dynamically added buttons and created usual javascript functions that add the field/line/block:

function addLine(alButton){
    //Add a new line
}