CODEWITHSUNDEEP
javascriptfunction
Derple
Derple

Reputation: 863

Multiple alerts due to method

I have a dynamic table which receives new rows using append.

Within each of those rows is a td where a number(quantity) is represented.

Either side of the number is a button(plus & minus).

Each time the button is pressed it appends using the function append.

Just testing the buttons function due to when the object exists on the page, i have used alert() to illustrate its functioning correctly, HOWEVER if i have created 6 rows, the alert occurs 6 times.

Now i understand why, as i am recalling the function that controls the quantity so it will work for each new row, on the button press in function append().

The issue i have: Can/should i refresh a function for each row, without it essentially creating duplicates of the function. To my understanding i need to refresh each new row or the button will not 'exist' in order for the function to work on that button. 

function append() {
    var adj_button_down = "<button type='button' class='btn btn-default btn-sm small-btn-quant-adj quant_adjust_down'><span class='glyphicon glyphicon-minus'></span> </button>";
    var adj_button_up = "<button type='button' class='btn btn-default btn-sm small-btn-quant-adj quant_adjust_up'><span class='glyphicon glyphicon-plus'></span></button>";                             

    $( "#till__tablepanel_table_"+tablenumber ).append( "<tr id='"+ fullReference+newrownum +"'><td>"+ newrownum +"</td><td>"+value_infoTitle+"</td><td>"+adj_button_down+"<span id='"+ fullReference+newrownum +"_price' class='wrap quantity'>1</span>"+adj_button_up+"</td><td>&#163;"+value_unitPrice+"</td><td>&#163;<span>"+value_unitPrice+"</span></td></tr>" );

quantityAdjust();

}

function quantityAdjust() {
    quantAdjustUp();
}

function quantAdjustUp(){
    $(".quant_adjust_up").click( function() {
        alert("test success");
    });
}

Upvotes: 0

Views: 47

Answers (2)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324710

Keep track of your stuff:

function append() {
    var adj_button_down = "...";
    var adj_button_up = "...";
    var newrow = $("...").append("...");
    quantityAdjust(newrow);
}

function quantityAdjust(newrow) {
    quantityAdjustUp(newrow);
}

function quantityAdjustUp(newrow) {
    newrow.find(".quant_adjust_up").click(function() {...});
}

Upvotes: 1

Rodney G
Rodney G

Reputation: 4826

Turn off the click handler first before reassigning:

$(".quant_adjust_up").off("click").on("click", function () {
      alert("test success");
});

Upvotes: 0

Related Questions