为什么单击javascipt事件不起作用

本文介绍了为什么单击javascipt事件不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在创建一个简单的模板引擎，但我遇到问题，并非所有我的事件都想要绑定，我使用属性em绑定所有元素上的onclick事件，但是如果可以看到js小提琴，人物点击事件有效，但没有子元素事件有效，例如，朋友事件不起作用。所有的代码都只是测试一个非常脏的。（对不起英语不好 JSFIDDLE https://jsfiddle.net/fjekLyv9/9/ 我尝试过： HTMLIm creating a simple template engine, but I run into problem,that not all my events want to bind, I binding the onclick event on all the elements with an attribute "em", but If can see the js fiddle, the person click event works but no of the child elements events works for example the friends events does not work. all the code is just testing an very dirty.;( sorry for bad EnglishJSFIDDLEhttps://jsfiddle.net/fjekLyv9/9/What I have tried:HTML<div id="main"> </div> <script id='personTemplate' type="emersion/template"> <header class="w3-container w3-light-grey"> <h3>{name}</h3> </header> <div class="w3-container"> <hr> <div> Profile <p>Balance : {balance}</p> <p>Registered : {registered}</p> <p>Location : {latitude},{longitude}</p> </div> <hr> <div> About <p>Age : {age}</p> <p>Eye Color : {eyeColor}</p> <p>About me : {about}</p> <hr> <div> Friends <div> [forEach(friends) model friendTemplate] </div> </div> </div> </script> <script id='friendTemplate' type="emersion/template"> <h3>{name}</h3> </script> <script type="text/javascript"> </script></div> JAVASCRIPTJAVASCRIPTfunction init(object, element, templateId) { handler = function () { alert("click"); } var template = document.getElementById(templateId); var templateText = template.innerHTML; //add click Event var translatedElement = translateTemplate(object, templateText) var events = translatedElement.querySelectorAll('[em]') for (var i = 0; i < events.length; i++) { console.log(events[i]); events[i].removeAttribute('em') events[i].onclick = handler; events[i].style.color = 'red'; } element.appendChild(translatedElement)}function translateTemplate(object, templateText) { var rxp = /{([^}]+)}/g var curMatch; var curItem = templateText; //find functions while (curMatch = rxp.exec(templateText)) { if (curMatch[1] == ":model") { curItem = curItem.replace(curMatch[0], object.toString()) } else { curItem = curItem.replace(curMatch[0], object[curMatch[1]]) } }; rxp = /\[([^\]]+)\]/g while (curMatch = rxp.exec(curItem)) { var func = praseFunction(curMatch[0], curMatch[1]) var curObject = object;; if (func.objectName != ":model") { curObject = object[func.objectName]; } if (func.command == 'forEach') { var tempElement = document.createElement("div") curObject.forEach(function(item, index) { init(item, tempElement, func.template); }); curItem = curItem.replace(func.text, tempElement.innerHTML); } } return domify(curItem);}function domify(str) { var el = document.createElement('div'); el.innerHTML = str; return el;}function praseFunction(text, functionText) { var func = { text: "", functionText: "", command: "", objectName: "", name: "", template: "" }; func.text = text; func.functionText = functionText; func.command = func.functionText.substring(0, (func.functionText.indexOf("("))); func.objectName = func.functionText.substring(func.functionText.indexOf("(") + 1, func.functionText.indexOf(")")); var tempString = func.functionText.substring(func.functionText.indexOf(" ") + 1); func.name = tempString.substring(0, tempString.indexOf(" ")); func.template = tempString.substring(tempString.indexOf(" ") + 1, tempString.length); return func;}function has(object, key) { return object ? hasOwnProperty.call(object, key) : false;}var personData = { "_id": "5800744a885b5b29afe8d30f", "index": 0, "guid": "56a7cf9d-67f8-4072-9bec-c7a3db8cf998", "isActive": false, "balance": "$1,575.60", "picture": "http://placehold.it/120x120", "age": 20, "eyeColor": "brown", "name": "Booker Anthony", "gender": "male", "company": "QUINTITY", "email": "[email protected]", "phone": "[phone]", "address": "982 Commercial Street, Tedrow, Florida, 1252", "about": "Quis commodo exercitation qui et non elit qui magna non. Minim enim anim fugiat fugiat velit sunt amet cillum. Mollit et ad reprehenderit magna ea sit mollit veniam enim qui irure quis in labore.\r\n", "registered": "2016-02-27T08:13:20 -02:00", "latitude": -71.704333, "longitude": 177.511677, "tags": [ "nisi", "commodo", "magna", "veniam", "esse", "voluptate", "ea" ], "friends": [{ "id": 0, "name": "Frankie Burks", "items": ["item1", "item2", "item3"] }, { "id": 1, "name": "Sherri Matthews", "items": ["item4", "item5", "item6"] }, { "id": 2, "name": "Elise Ross", "items": ["item7", "item8", "item9"] }], "greeting": "Hello, Booker Anthony! You have 3 unread messages.", "favoriteFruit": "banana"};var treeData = [{ "id": "58070d831248360caa61a5f7", "node": "UTARIAN", "children": [{ "id": 0, "node": "BIOTICA", }]}]var mainElement = document.getElementById('main') init(personData, mainElement, 'personTemplate');推荐答案 这篇关于为什么单击javascipt事件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！