多个处理程序：jQuery $（document）.on

Question

Is it only allowed to bind 1 event to 1 thing? 只能将1个事件绑定到1个东西吗？ What I mean is, that I have 2 js files I want to initialize on the same page load. 我的意思是，我有2个要在同一页面加载时初始化的js文件。 So I have tried the following: 所以我尝试了以下方法：

js1 / Mapmode.js: js1 / Mapmode.js：

$(document).ready(function () { initMapModeContent() });

function initMapModeContent(){
    alert('test');
    initPageHeader();
    var oldHTML = document.getElementById('mapmodeContent').innerHTML;
    var newHTML = oldHTML + '<div><a href="pages/Beskeder.jsp#beskeder" id="mapLink" name="mapLink"><img id="mapLinkImage" alt="a map which links to the beskeder" src="images/beskeder.png"/></a></div>';
    document.getElementById("mapmodeContent").innerHTML=newHTML;
}

js2 / PageHeader.js: js2 / PageHeader.js：

$(document).on("pageinit", "#mapmode", function(event) {
        initPageHeader();
    });
    $(document).on("pageinit", "#beskeder", function(event) {
        initPageHeader();
    });

    function initPageHeader() {
        var id = document.getElementById('header').parentNode.id;
        //TODO getdata with the id(page we are currently on).
        $("#header").html(function(index, originalMarkup) {
            return '<a data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true" ' + 'data-corners="true" class="ui-btn-left ui-btn ui-btn-up-a ui-shadow ui-btn-corner-all" href="#" ' + 'data-rel="back" data-role="button"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">' + '<img src="../images/back.png" alt="back" align="middle" vspace="2"></span></span></a>' + '<h1 aria-level="1" role="heading" class="ui-title">' + '<img src="../images/main_header.png" alt="logo" align="middle" vspace="2">' + '</h1><a data-theme="a" data-wrapperels="span" data-iconshadow="true" data-shadow="true"' + 'data-corners="true" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-inline ui-shadow ui-btn-corner-all" ' + 'href="#first" data-role="button" data-inline="true"><span class="ui-btn-inner ui-btn-corner-all">' + '<span class="ui-btn-text">' + '<img src="../images/home.png" alt="picture to take you to the first page" align="middle">' + '</span></span></a>';
        });
    }

html5: html5：

<%-- 
    Document   : mapMode
    Created on : Jul 12, 2012, 10:36:22 AM
    Author     : ame
--%>

<!DOCTYPE html> 
<html>
    <head> 
        <title>Map</title> 
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <link rel="stylesheet" href="js/jquery.mobile-1.1.0.css" />
    </head> 
    <body> 
        <!-- Start of first page -->
        <div data-role="page" id="mapmode" name="mapmode">

            <div data-role="header" id="header" name="header">

                                <p>TEEEST</p>
            </div><!-- /header -->

            <div data-role="content" id="mapmodePageContent" name="mapmodePageContent"> 
                <p>I'm the first page in mapMode!.</p>      

            </div><!-- /content -->
        </div><!-- /page -->



        <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
        <script type="text/javascript" src="../js/jquery.mobile-1.1.0.js"></script>
        <script type="text/javascript" src="../js/Mapmode.js"></script>
        <script type="text/javascript" src="../js/PageHeader.js"></script>

    </body>
</html>

I just can't find in documentation that it shouldn't work? 我只是在文档中找不到它不起作用？ any suggestions for how it can be made, if it is not legal, or anyone that can spot my error. 如果不合法，如何提出建议，或者发现我的错误的任何人。

It works in PageHeader.js but not in Mapmode.js, which is why I ask this. 它可以在PageHeader.js中工作，但不能在Mapmode.js中工作，这就是为什么我问这个问题。

Answer 1

.on() attach an event to a selector. .on()将事件附加到选择器。

You can assign any number of events to it like click, submit etc... 您可以为其分配任意数量的事件，例如单击，提交等。

But I think it is not wise to assign same event more than once to the same element. 但是我认为将同一事件多次分配给同一元素是不明智的。 I think only the last attached event will fire. 我认为只有最后一个附加事件会触发。

多个处理程序：jQuery $（document）.on

问题描述

1 个解决方案

解决方案1
1 已采纳 2012-07-13 12:22:30

多个处理程序：jQuery $（document）.on

问题描述

1 个解决方案

解决方案1 1 已采纳 2012-07-13 12:22:30

解决方案1
1 已采纳 2012-07-13 12:22:30