为什么单击javascipt事件不起作用 [英] Why does click javascipt events not working

问题描述

我正在创建一个简单的模板引擎，但我遇到问题，并非所有我的事件都想要绑定，我使用属性em绑定所有元素上的onclick事件，但是如果可以看到js小提琴，人物点击事件有效，但没有子元素事件有效，例如，朋友事件不起作用。所有的代码都只是测试一个非常脏的。（对不起英语不好

JSFIDDLE

https://jsfiddle.net/fjekLyv9/9/



我尝试过：



HTML

Im 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 English
JSFIDDLE
https://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>

JAVASCRIPT

JAVASCRIPT

function 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": "[e-mail]",
    "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');

推荐答案

1,575.60，
picture： < span class =code-string> http://placehold.it/120x120，
age： 20 ，
eyeColor： brown，
name： Booker Anthony，
性别： male，
company： QUINTITY，
email： [e-mail]，
phone ： + 1（963）593-3024，
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.\\\\
，
已注册： 2016-02-27T08：13：20 -02 ：00，
纬度： - 71。 704333 ，
经度：< span class =code-digit> 177 。 511677 ，
tags：[
nisi，
commodo，
magna，
veniam，
esse，
voluptate，
ea
]，
friends：[{
id：< span class =code-digit> 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： 你好，Booker Anthony！你有3条未读消息。，
favoriteFruit： banana
};

var treeData = [{
id： 58070d831248360caa61a5f7，
< span class =code-string> node： UTARIAN，
children：[{
id： 0 ，
node： BIOTICA ，

} ]}]
var mainElement = document .getElementById（' main'）
init（personData，mainElement，' < span class =code-string> personTemplate'）;

1,575.60", "picture": "http://placehold.it/120x120", "age": 20, "eyeColor": "brown", "name": "Booker Anthony", "gender": "male", "company": "QUINTITY", "email": "[e-mail]", "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事件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！