个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 08:54:04 24 4
gpt4 key购买 nike

我似乎无法让我的 javascript .click() 方法与我动态创建的 div 一起工作。在这段代码中，我在类名“class1”下创建了每个 div，但我的点击方法似乎没有检测到它们的存在。这是我的代码:

    <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>

这是它返回的内容(取自谷歌浏览器):

<!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>

最佳答案

因为元素在页面加载时不存在于 DOM 中，您需要使用事件委托(delegate)，例如 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.");
    });
});

关于javascript - 在javascript中获取动态创建的div的名称？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15232085/

24 4 0
文章推荐： javascript - Jquery UI 1.10 - 获取 Accordion 内选项卡的索引
文章推荐： java - mpjboot 庆典 : java: command not found
文章推荐： python - 当数据格式为 "NCHW"时，如何在tensorboard中显示图像？
文章推荐： java - spring中的认证机制
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com