Question

我正在尝试将参数传递给动态生成元素的onclick事件。我已经看到了现有的stackoveflow问题，但它并没有满足我的特定需求。在这个现有问题中，他们试图使用$（this）.text（）;但我不能在我的例子中使用它。

Click event doesn't work on dynamically generated elements

在下面的代码片段中，我试图将程序和macroVal传递给onclick事件，但它不起作用。

onClickTest = function(text, type) {
        if(text != ""){
        // The HTML that will be returned
        var program = this.buffer.program;
        var out = "<span class=\"";
        out += type + " consolas-text";
        if (type === "macro" && program) {
            var macroVal = text.substring(1, text.length-1);
            out += " macro1 program='" + program + "' macroVal='" + macroVal +  "'";
        }
        out += "\">";
        out += text;
        out += "</span>";
        console.log("out " + out);


        $("p").on("click" , "span.macro1" , function(e)
        {
            BqlUtil.myFunction(program, macroVal);
        });

    }else{
        var out = text;
    }
    return out;

};

console.log out out给我这个

<span class="macro consolas-text macro1 program='test1' macroVal='test2'">{TEST}</span>

我已尝试过这个程序和程序，但它没有用。

Answer 1

获取span元素属性的值，因为您将它们包含在html：

中

$("p").on("click" , "span.macro" , function(e)
{
  BqlUtil.myFunction(this.getAttribute("program"), 
    this.getAttribute("macroVal"));
});

但是，您的代码中存在一些问题。

您在分配给class的html中指定out属性两次，
您使用的单引号不正确（使用'，而不是’），
属性值的引号混乱：对属性值始终使用单引号或双引号

var out = "<span class='";

...

out += "' class='macro' program='" + program + "' macroVal='" + macroVal + ;

...

out += "'>";

取决于您计划拨打onClickTest的次数，最终可能会为click设置多个p span.macro事件处理程序。

将参数传递给动态生成元素的click事件

1 个答案: