Question

我正在做反应，当点击一个按钮时，会创建一个li项目，在列表项中我有一个带有glyphicon的span，我想为glyphicon创建一个onClick事件，但它不起作用。

Html

<ul id="list"></ul>

这是创建列表项

的方法

var listItem = document.createElement("li");              
        listItem.innerHTML = this.tokenSeries;
        var span = document.createElement("span");
        span.innerHTML = "<span class='glyphicon glyphicon-remove' onClick={this.test}></span>" 
        listItem.appendChild(span);
        document.getElementById('list').appendChild(listItem);

这是我的测试方法

@action.bound test() {
        alert("hello");
    }

Answer 1

如果您使用React，可以使用React Way而不是VanillaJS方法

constructor() {
     super();
     this.state = {
          list: []
     }
}

addListItem = () => {
     var list = [...this.state.list];
     var ele= <li>{this.tokenSeries}<span className='glyphicon glyphicon-remove' onClick={this.test}></span></li>
     list.push(ele)
     this.setState({list})
}

//render

<ul id="list">{this.state.list}</ul>

Answer 2

我希望它的好处：）

var listItem = document.createElement("li");              
    listItem.innerHTML = this.tokenSeries;
    var span = document.createElement("span").on('click', (e) => {
     //place to call function trigger
     this.test(e);
    });
    span.innerHTML = "<span class='glyphicon glyphicon-remove'></span>" 
    listItem.appendChild(span);
    document.getElementById('list').appendChild(listItem);

Answer 3

设置html后设置onclick方法来调用你想要的函数

var listItem = document.createElement("li");              
            listItem.innerHTML = "text"
            var span = document.createElement("span");
            span.innerHTML = "<span class='glyphicon glyphicon-remove' ></span>" 
            span.onclick = this.test;
            listItem.appendChild(span);
            document.getElementById('list').appendChild(listItem);

或者您可以在那里创建一个功能

 var listItem = document.createElement("li");              
                listItem.innerHTML = "text"
                var span = document.createElement("span");
                span.innerHTML = "<span class='glyphicon glyphicon-remove' ></span>" 
                span.onclick = function(){
                //write your function here
                };
                listItem.appendChild(span);
                document.getElementById('list').appendChild(listItem);

如何在创建范围时调用onClick函数，In react

3 个答案: