在jquery运行函数中单击()而不是真正点击元素

时间:2017-11-13 10:00:20

标签: javascript jquery

我对我的代码有一些疑问我真的不明白它是如何工作的: 我调用函数submitColumn,函数检查我的数组中是否有元素,如果我没有将附加带元素名称和id的

  • 列表
  • 在同一时间将附加到该列表的span一个id和一个类,我希望在单击时使用以从我的数组中删除元素并从我的列表中删除元素,但span.click(deleteColumn())是自动调用这就是我不明白的地方。 感谢您的帮助,祝大家度过美好的一天

    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);
    }
    

    1 个答案:

    答案 0 :(得分:1)

    这行代码正在执行deleteColumn函数,而不是引用它......

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

    如果您更改它以便添加对该函数的引用,而不是执行它,那么它应该可以解决您的问题......

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

    不要忘记在具有相同代码的两个地方都进行更改。