Question

我似乎无法让我的javascript .click（）方法与我动态创建的div一起使用。在这段代码中，我在类名“class1”下创建了div，但我的click方法似乎没有检测到它们的存在。这是我的代码：

    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

    function populate() {
        var select = document.getElementById("centres");
        for (var i = 1; i <= 10; i++) {
            var option = document.createElement("option");
            option.value = i;
            option.text = i;
            select.appendChild(option);
        }
    }

    function divGenerator() {
        var div;
        for (var i = 1; i <= document.getElementById("centres").selectedIndex + 1; i++) {
            div = document.createElement("div");
            div.className = "class1";
            div.innerHTML = "Space " + i;
            div.style.width = "100px";
            div.style.height = "100px";
            div.style.float = "left";
            document.getElementById("container2").appendChild(div);
        }
    }

    function glassLoad() {
        path_to_root_dir = "../../Content/";
        var myBox = new GlassBox();
        myBox.init('myBox', '128px', '62px', 'hidden');
        myBox.apos('170px', '150px');
    }
    // window.onload = populate;

    $(function () {
        $("container2").on("click", ".class1", function () {
            alert("The div was clicked.");
        });
    });

</script>




<div id="container1" style="width: auto; height: 50px;">
    <div id="myBox">Hello World!</div>
    <button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="divGenerator();">Generate</button>
    @Html.DropDownList("centres")
</div>
<div id="container2" style="margin: 10px; float: left;" />

<head>

    <script type="text/javascript" src="../../Content/javascripts/glassbox/glassbox.js"></script>
    <style type="text/css">
        #myBox #myBox_content {
            padding: 2px;
            font-family: verdana, arial, helvetica;
            font-size: 12px;
        }
    </style>
    <title></title>
</head>

<body>

    <!--
<a href="javascript:myFunc();">popup</a>
-->
</body>

以下是它返回的内容（取自Google Chrome）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="description" content="Description of your web page goes here." />
    <meta name="keywords" content="Keywords for you web page go here. Each keyword or group of keyword phrases are separated by a comma. Keep this  list short and relevant to the content and title of this specific page." />
    <title>OneEighty Asset Manager
    </title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
    <div id="header">
        <div id="logo">
            <p></p>
        </div>
    </div>
    <!-- end #header -->
    <div id="menu">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/Home/About">About</a></li>
        </ul>
    </div>
    <!-- end #menu -->
    <div id="wrapper">
        <div class="btm">
            <div id="page">
                <h1>
                    <img src="../../Content/Images/1Eighty.png" alt="" style="height: 100px; width: 750px;" /></h1>
                <div id="content">
                    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />

<script type="text/javascript">

    function populate() {
        var select = document.getElementById("centres");
        for (var i = 1; i <= 10; i++) {
            var option = document.createElement("option");
            option.value = i;
            option.text = i;
            select.appendChild(option);
        }
    }

    function divGenerator() {
        var div;
        for (var i = 1; i <= document.getElementById("centres").selectedIndex + 1; i++) {
            div = document.createElement("div");
            div.className = "class1";
            div.innerHTML = "Space " + i;
            div.style.width = "100px";
            div.style.height = "100px";
            div.style.float = "left";
            document.getElementById("container2").appendChild(div);
        }
    }

    function glassLoad() {
        path_to_root_dir = "../../Content/";
        var myBox = new GlassBox();
        myBox.init('#myBox', '128px', '62px', 'hidden');
        myBox.apos('170px', '150px');
        alert("div clicked");
    }
    // window.onload = populate;



</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#container2").on("click", ".class1", function () {
            path_to_root_dir = "../../Content/";
            var myBox = new GlassBox();
            myBox.init('#myBox', '128px', '62px', 'hidden');
            myBox.apos('170px', '150px');
            alert("div clicked");
        });
    });
</script>



<div id="container1" style="width: auto; height: 50px;">

    <button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="divGenerator();">Generate</button>
    <select id="centres" name="centres"><option>Southdale</option>
<option>Sasolburg</option>
<option>Sandton City</option>
<option>Greenstone</option>
<option>Morningside</option>
<option>Easgate</option>
<option>Bedfordview</option>
<option>Fourways</option>
<option>Linksfield Terrace</option>
<option>Carlton Centre</option>
<option>testcentre1</option>
<option>testcentre2</option>
<option>testcentre3</option>
</select>
</div>
<div id="container2" style="margin: 10px; float: left;" />

<head>

    <script type="text/javascript" src="../../Content/javascripts/glassbox/glassbox.js"></script>
    <style type="text/css">
        #myBox #myBox_content {
            padding: 2px;
            font-family: verdana, arial, helvetica;
            font-size: 12px;
        }
    </style>
    <title></title>
</head>

<body>
    <!--
<a href="javascript:myFunc();">popup</a>
-->
</body>

                </div>
                <!-- end #content -->
                <div style="clear: both;">
                    &nbsp;
                </div>
            </div>
            <!-- end #page -->
        </div>
    </div>
    <div id="footer">
        <p>
            Copyright (c) 2009 1eightyintra.com. All rights reserved.
        </p>
    </div>
    <!-- end #footer -->
</body>
</html>

Answer 1

因为页面加载时DOM中不存在该元素，所以您需要使用事件委托，例如on：

$(function () {
    $("body").on("click", ".class1", function () {
        alert("The div was clicked.");
    });
});

或者对于1.7之前的jQuery，请使用delegate：

$(function () {
    $("body").delegate(".class1", "click", function () {
        alert("The div was clicked.");
    });
});

Answer 2

click仅将处理程序绑定到调用DOM时出现的元素。

相反，请使用jQuery on method：

$(document).ready(function () {
    $("body").on("click", ".class1", function () {
        alert("The div was clicked.");
    });
});

Answer 3

您需要将点击处理程序重新应用于新创建的div。

在javascript中获取动态创建的div的名称？

3 个答案: