click() in jquery run function without to realy click on element

Question

I have some question about my code i dont realy understand how is working : I call function submitColumn , the function check if a have the element in my array , if i dont have will append an

list with the element name and id

in the same time will append to that list an span whit a id an class , that span i want to use on click to remove element from my array and remove element from my list , but span.click(deleteColumn()) is call automatic and that is what im not understand . Thanks for helping me , have a great day all of you

function submitColumn() {
    //get textual input from the user.
    var colName = document.querySelector("#txtCol").value;
    var colType = document.querySelector("#selectType").value;

    if (columnsArray.length > 0) {
        for (var i = 0; i < columnsArray.length; i++) {
            var count = undefined;
            if (columnsArray[i] === colName) {
                count = true;
            } else if (columnsArray[i] !== colName) {
                count = false;
            }
        }

        if (count) {
            return alert("You can not call two column with the same name");
        } else {
            $("<li/>").attr("id", colName + "id").addClass("colAndType").text("New column added with name: " + colName + " and  type " + colType).appendTo("#colListUl");
            $("#" + colName + "id").append('<span class="nav-click" />');
            $(".nav-click").addClass("ui-icon ui-icon-closethick").attr("id", "close" + colName).click(deleteColumn(colName));
            columnsArray.push(colName);
            columnsTypeArray.push(colType);
        }
    } else {
        $("<li/>").attr("id", colName + "id").addClass("colAndType").text("New column added with name: " + colName + " and  type " + colType).appendTo("#colListUl");
        $("#" + colName + "id").append('<span class="nav-click" />');
        $(".nav-click").addClass("ui-icon ui-icon-closethick").attr("id", "close" + colName).click(deleteColumn(colName));
        columnsArray.push(colName);
        columnsTypeArray.push(colType);
    }
}

function deleteColumn(idColumn) {
    var idLi = idColumn + "id";
    var close = "close" + idColumn;
    console.log(close, idLi);
}

Reinstate Monica Cellio · Answer 1 · 2017-11-13T10:45:34.840

1

This line of code is executing the deleteColumn function, rather than referencing it...

$(".nav-click").addClass("ui-icon ui-icon-closethick")
    .attr("id", "close" + colName).click(deleteColumn(colName));

If you change it so you add a reference to the function, rather than execute it, then it should resolve your problem...

$(".nav-click").addClass("ui-icon ui-icon-closethick")
    .attr("id", "close" + colName).click((function(columnId) {
        deleteColumn(columnId)
    })(colName));

Don't forget to change it in both places where you have that same code.

edited Nov 13 '17 at 10:45

answered Nov 13 '17 at 10:03

Reinstate Monica Cellio

25,975
6
51
67

Thank you @Archer , but now i have another problem , when i call the function click function in working only for the first elem , not for the others : – Pop Alexandru Nov 13 '17 at 10:32
$("#close"+colName).click(function(){ deleteColumn(colName)}); – Pop Alexandru Nov 13 '17 at 10:32
You can include the function in another enclosure, in order to make sure it uses the value of `colName` at the time you create the function, rather than the value of it when the function is called. I'll change the code to suit. – Reinstate Monica Cellio Nov 13 '17 at 10:44
god bless you ! – Pop Alexandru Nov 13 '17 at 16:22

click() in jquery run function without to realy click on element

1 Answers1