javascript 如何为动态创建的html元素添加方法?

jv4diomz  于 2023-05-21  发布在  Java
关注(0)|答案(1)|浏览(137)

我想在使用<select onchange>选择一个选项时调用一个javascript类方法。
我尝试在追加select元素时添加该方法,希望它在选择选项时运行该方法。
相反,当我添加新元素时,它只运行一次方法,然后它说
<select onchange="undefined">
当我检查。
$(container).append("<select onchange='"+ this.editField() +"' id='" + this.selectId + "'>
我的index.php

<?php include 'includes/header.php' ?>
<form action="includes/generate_form.php" id="survey_form" class="survey" method="post">
    <h1>Nytt formulär</h1>
    <div id="form_container"></div>
    <div onclick="new CustomField()">+</div>
</form>
<?php include 'includes/footer.php' ?>

我的custom.js文件

class CustomField {
    constructor() {
        this.labelId = crypto.randomUUID();
        this.inputId = crypto.randomUUID();
        this.selectId = crypto.randomUUID();
        var container = document.getElementById("form_container");
        $(container).append("<label contentEditable='true' id='" + this.labelId + "'>Label</label>");
        $(container).append("<input id='" + this.inputId + "'>");
        $(container).append("<select onchange='"+ this.editField() +"' id='" + this.selectId + "'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option></select>");
    }
    editField() {
        alert("hello")
    }
}
xzv2uavs

xzv2uavs1#

简短的回答是你不能做你想做的事情。
"<select onchange='"+ this.editField() +"' id='"...试图将函数的非String返回值作为String追加。
不幸的是,没有办法(没有一堆疯狂的正则表达式)将函数的非String返回值转换为String。如果你要传递函数本身-即+ this.editField +(无括号)-解释器会很乐意将其转换为String,但它看起来像这样:

editField() {
  alert("hello")
}

因此,需要正则表达式来删除所有您不想要的东西(editField(){}等),这非常混乱。当然,这段代码会抛出错误,因为editField()现在在CustomField的上下文之外,所以它只是无效代码。
除了改变处理这个问题的方式之外,我看到的唯一选择就是简单地从editField()返回一个String:

editField() {
  return "alert(\"hello\")";
}

相关问题