Mootools - why not run?_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-17 17:06 出处：网络

you can test my code , when i click buton , we will get 2 link click on first link , not alert click on second link , show alert

相关专题：mootools

you can test my code , when i click buton , we will get 2 link

click on first link , not alert

click on second link , show alert

why first link not alert, how to it can alert ?

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("mootools", "1.1.2");</script>
<script>
    window.addEvent('domready', function(){
        $('button').addEvent('click', function(){
            $('content').innerHTML = $('test').innerHTML;
        });
    });

</script>
</head>
<body>
<input id="button" type="button" name="button" value="Click"/>
<div id="content">
</div>
<div id="test">
    <script>
        function test(){
            $('a-content').addEvent('click', function(){
                alert(1);
            });
        }
        window.addEvent('domready', function(){
            test();
        });
   开发者_运维技巧 </script>
    <a id="a-content" href="#">CLICK HERE</a>
</div>
</body>
</html>

When injecting HTML on the fly events aren't carried over unless you use event delegation. If you don't use event delegation the event will only be on the original element. See http://mootools.net/docs/more/Element/Element.Delegation

You'll need to do something like this. $('body').addEvent('click:relay(#a-content)', function(){...}); Where the body would capture the click event and delegate it to any element with the id of "a-content".

Also by setting the content like this $('content').innerHTML = $('test').innerHTML; you will have duplicate elements with the id "a-content" this is wrong. HTML id's should be unique. Try classing stuff that you'll reuse instead.