Question

我必须使用“delibratelydangerousSnippet”进行演示，以便在JavaScript中渲染html，我已经完成了，现在我想调用一个div的函数onclick。

我试过这个，但什么也没发生。没有错误，没有事件发生，任何人都可以告诉我这段代码中的问题是什么？

  mainString = '<ons-list-item  onclick="call()">'+
                                '<ons-list-item class="list__item ons-list-item-inner">' +
                                '<ons-row class="detail-row row ons-row-inner">' +
                                '<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">' +
                                '<ons-icon fixed-width="true" icon="ion-android-call" class="ons-icon ons-icon--ion ion-home fa-lg"></ons-icon>' +
                                '</ons-col>' +
                                '<ons-col class="col ons-col-inner" >' +
                                '<div class="desc">'+"Phone Number: "+data['Details'][i]['varPhone'] + '</div>' +
                                '</ons-col> ' +
                                '</ons-row>' +
                                '</ons-list-item>';

在同一个JavaScript中，我已经定义了call()函数，如下所示：

 function call(){
     window.location.href = 'tel:+1' + phone;
 }

Answer 1

您不能在结束标记内部使用onclick：结束标记只会结束标记，但您无法单击它。换句话说，onclick只能在起始标签中。

window.onload = function() {
    document.getElementsByTag("ons-list-item")[0].onclick = call;
}

或者给你的ons-list-item一个ID，比如'olitem'（只是示例）并使用：

window.onload = function() {
    document.getElementById("olitem").onclick = call;
}

Answer 2

不要在HTML页面中使用onClick事件，而是尝试提供＆＃34; id＆＃34;到JS字符串中的元素。

mainString = '</ons-list-item  id="myId">'+`enter code here`
                                '<ons-list-item class="list__item ons-list-item-inner">' +
                                '<ons-row class="detail-row row ons-row-inner">' +
                                '<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">' +
                                '<ons-icon fixed-width="true" icon="ion-android-call" class="ons-icon ons-icon--ion ion-home fa-lg"></ons-icon>' +
                                '</ons-col>' +
                                '<ons-col class="col ons-col-inner" >' +
                                '<div class="desc">'+"Phone Number: "+data['Details'][i]['varPhone'] + '</div>' +
                                '</ons-col> ' +
                                '</ons-row>' +
                                '</ons-list-item>';

Once the HTML gets loaded try to access the HTML element using jQuery and hook up the click event on the same element using id.

$("#myId").on("click",function(){
 window.location.href = 'tel:+1' + phone;
});

在JavaScript中调用函数

2 个答案: