Javascript 如何在点击复选框时调用函数，该复选框是在点击d3元素（如rect）时弹出的

我有一个矩形，这是d3元素，我想点击该矩形和弹出窗口应该来，这将有复选框。单击该复选框时，应调用函数
到现在为止，当我在html中调用一个函数时，该特定函数不会被调用

mini.append("g").selectAll("miniItems")
            .data(data)
            .enter().append("rect")
            .attr("id", "rect")
            .attr("x", 200)
            .attr("y", function(d,i) {return y2(i*1.2)+5;})
            .attr("width", windowWidth - 700)
            .attr("height", 15)
            .attr("stroke", "grey")
            .on("click", onClick);/*on click of d3 element this function is invoked*/

  function onClick(d){
     let content;
    content = "<div style='background: white;width:70px; box-shadow:3px 3px 5px #797878;height:30px; padding:8%'><input type='checkbox' id='myCheck' (click)='onClaim(d.executionId)'></input>"+ "claim" + "</div>";
     div.html(content)
       .style("left", (d3.event.pageX) + "px") 
        .style("top", (d3.event.pageY) + "px")
        .style("display", "block");
   }

 function onClaim(value){/*this function is not executed*/
        console.log(value);
}

mini.append（“g”）。选择所有（“minitems”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“id”、“rect”）
.attr（“x”，200）
.attr（“y”，函数（d，i）{返回y2（i*1.2）+5；}）
.attr（“宽度”，窗口宽度-700）
.attr（“高度”，15）
.attr（“笔划”、“灰色”）
。打开（“单击”，再单击）/*单击d3元素时，将调用此函数*/
函数onClick（d）{
让内容；
content=“”+”索赔“+”；
div.html（内容）
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY）+“px”）
.样式（“显示”、“块”）；
}
函数onClaim（value）{/*此函数不执行*/
console.log（值）；
}

我没有得到任何解决方案来调用该函数

---

感谢您的帮助。提前感谢：）

代码中的引号有一些问题。试试这个：

 content = "<div style='background: white;width:70px; box-shadow:3px 3px 5px #797878;height:30px;'>
       <input type='checkbox' onClick='onClaim(d.data);'>
     </div>"

content=”
"

您在30px；的末尾关闭了“周围”；。 我将其替换为单引号，并在末尾添加了双引号。

Hlo dkshaaa

你可以试试这个

因为您使用的是复选框而不是onClick，所以可以使用onChange

所以不是这个

你可以用

在角度分量中，可以使用事件作为

function onClaim(event, execId) {
    if(event.target.checked){
       //DO SOMETHING
    }
}

---

希望这能有所帮助。；-

为什么不像您已经在使用

d3

那样添加事件

在

onClick

函数中，您可以将

click

事件绑定到输入#myCheck

请发布一个易于回答的工作片段（因为您的帖子缺少

div

，

mini

等的定义）。无论如何，我在这里使用示例代码创建了一个片段：

var svg=d3.select（'svg#chart'）；
var div=d3.select（'div.tooltip'）；
var data=[{id:1，executionId:1}，{id:2，executionId:2}]；
svg.append（“g”）.selectAll（“迷你项”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“id”、“rect”）
.attr（“x”，100）
.attr（“y”，函数（d，i）{return（i*100）；}）
.attr（“宽度”，100）
.attr（“高度”，15）
.style（“笔划”、“灰色”）
.on（“单击”，onClick）；/*单击d3元素时调用此函数*/
函数onClick（d）{
让内容；
content=“”+”索赔“+”；
div.html（内容）
.style（“左”，“d3.event.pageX）+“px”）
.style（“top”，（d3.event.pageY）+“px”）
.样式（“显示”、“块”）；
div.select（'input#myCheck'）。on（'click'，function（）{
如果（选中此项）
onClaim（d.executionId）；
})
}
函数onClaim（value）{/*此函数不执行*/
console.log（值）；
}

div.tooltip{
位置：绝对位置；
}

hi@sean Leroy，感谢您的回复：）但实际上，在发布带有引号的问题时出现了一些错误…因此，现在我编辑了它，但它仍然不起作用…请您指出我犯了错误的地方。您的控制台中是否存在错误，或者它只是在没有说明原因的情况下没有执行？当我将鼠标悬停在该特定函数上时，我得到“声明了'onClaim'，但从未读取其值'“我明白了。这意味着这个特定的函数并没有被调用。我不知道如何调用它以便执行它。Hi-DP，感谢您的回复，但正如我所说的，onClaim函数根本不被调用。当我将鼠标悬停在该函数上时，它显示为“onClaim”已声明，但其值从未被读取“…@DeekshaMulgaonkar我认为您必须为该弹出窗口创建动态组件。我不确定是否有更简单的解决方案。嗨@Shashank非常感谢您的回复：）它现在可以工作了。唯一的问题是“this.checked”出现了一些问题（在IDE中，它用红色下划线），这不会影响输出，但ng生成会因此失败。我认为这是因为我使用的是typeScript。悬停在“this.checked”上显示的消息是“Property'checked'不存在于类型“BaseType”上。Property'checked'不存在于type'元素上“。任何检查复选框是否已选中的替代方法，而不是使用上述方法，我很高兴能提供帮助！我不确定typescript是如何强制转换的，但我发现并认为它可能会有所帮助：

const input=this as HTMLInputElement；if（input.checked）{onClaim（d.executionId）；}”

。它基本上是获取输入元素并检查它的

checked

属性，因此我确信您可以了解如何在typescript中获取HTML元素的属性。

div.select('input#myCheck').on('click', function () {
    if(this.checked) // checking if the checkbox is checked
        onClaim(d.executionId);
});