Question

此代码根据在另一个地方检查了哪个输入复选框.catInput来填充catSelectedDiv。

使用innerHTML添加.removeUpdateButtons div，它们出现并且似乎起作用。也就是说，他们的onclick函数被调用，并且CSS中的悬停操作可以工作。

但是，我需要将它们的ID传递给click函数，这样点击按钮就可以取消选中相应的复选框。

代码的“业务结束”是输出+ =行。

如图所示，警报提供“未定义”。警报为{class 1}甚至.parent()的ids /类等提供了未定义的选项。

function clickInput() //for category check box list
{
    var inputSet = document.getElementsByClassName("catInput"); //these are the category checkboxes
    var thisInput;
    var outPut = "";
    var thisLabel;
    for (thisInput = 0; thisInput < inputSet.length; thisInput++)
    {
        if (inputSet[thisInput].checked)
        {
            thisLabel = document.getElementById("L" + inputSet[thisInput].id);
            outPut += '<div id="X' + inputSet[thisInput].id + '" class="removeUpdateButtons" onclick="clickXButton()"></div>' + (thisLabel.innerText || thisLabel.textContent) + '</br>';
        };
    };
    document.getElementById("catSelectedDiv").innerHTML = outPut;
    return;
};

function clickXButton()
{
    alert($(this).attr("id"));
};

我需要的是将每个div /按钮的识别信息放入onclick fn（）代码中。感谢。

Answer 1

使用onclick="clickXButton()"回复onclick="clickXButton(this)"。并将您的功能更改为：function clickXButton(el) { alert($(el).attr("id")); };

Answer 2

你的代码应该是这样的

function clickInput() //for category check box list
{
    var inputSet = document.getElementsByClassName("catInput"); //these are the category checkboxes
    var thisInput;
    var outPut = "";
    var thisLabel;
    for (thisInput = 0; thisInput < inputSet.length; thisInput++)
    {
        if (inputSet[thisInput].checked)
        {
            thisLabel = document.getElementById("L" + inputSet[thisInput].id);
            outPut += '<div id="X' + inputSet[thisInput].id + '" class="removeUpdateButtons" onclick="clickXButton(this)"></div>' + (thisLabel.innerText || thisLabel.textContent) + '</br>';
        };
    };
    document.getElementById("catSelectedDiv").innerHTML = outPut;
    return;
};

function clickXButton(obj)
{
    alert($(obj).attr("id"));
};

Answer 3

jQuery提供了一种更好的方法来设置事件处理程序。在这种情况下，它将是：

...
// remove the onclick handler here
outPut += '<div id="X' + inputSet[thisInput].id + '" class="removeUpdateButtons"></div>' + (thisLabel.innerText || thisLabel.textContent) + '</br>';
...

$(document).on("click", "#catSelectedDiv .removeUpdateButtons", function() {
    alert($(this).attr("id"));
});

添加了脚本的div元素（按钮）显示和功能，但attributres返回undefined

3 个答案: