Javascript jquery onclick新元素未正确创建 jQuery UI按钮-图标 # { 宽度：200px； } #第一组 { 最小宽度：100px；宽度：自动；浮动：左；边框：2件纯黑；最小高度：100px；高度：自动；背景色：红色； } $（文档）.ready（函数（）{ $（“div”）。单击（函数（）{ 美元（$（'NLC TRANSPORT'））之后； }); $（“#s”）。单击（函数（）{ 警报（“sljsdf”）； }); }); 沃尔沃B9R_Javascript_Jquery_Html_Css

Javascript jquery onclick新元素未正确创建 jQuery UI按钮-图标 # { 宽度：200px； } #第一组 { 最小宽度：100px；宽度：自动；浮动：左；边框：2件纯黑；最小高度：100px；高度：自动；背景色：红色； } $（文档）.ready（函数（）{ $（“div”）。单击（函数（）{ 美元（$（'NLC TRANSPORT'））之后； }); $（“#s”）。单击（函数（）{ 警报（“sljsdf”）； }); }); 沃尔沃B9R

javascript jquery html css

Javascript jquery onclick新元素未正确创建 jQuery UI按钮-图标 # { 宽度：200px； } #第一组 { 最小宽度：100px；宽度：自动；浮动：左；边框：2件纯黑；最小高度：100px；高度：自动；背景色：红色； } $（文档）.ready（函数（）{ $（“div”）。单击（函数（）{ 美元（$（'NLC TRANSPORT'））之后； }); $（“#s”）。单击（函数（）{ 警报（“sljsdf”）； }); }); 沃尔沃B9R,javascript,jquery,html,css,Javascript,Jquery,Html,Css,在这里，当我单击第一个div时，程序会创建另一个div。新创建的div不会响应单击事件。在当前代码中，我指定新创建的div应该在单击时发出警报，但它不工作。谢谢由于#的元素是动态创建的，因此需要使用事件委派将事件处理程序注册到这些元素使用$（'#s'）时，单击（..）若要注册事件处理程序，它将仅将句柄注册到代码执行时dom中已存在的元素，在您的情况下，因为这些元素是在之后创建的，因此处理程序不会附加到新创建的元素试试这个 <!DOCTYPE html> <html>

在这里，当我单击第一个div时，程序会创建另一个div。新创建的div不会响应单击事件。在当前代码中，我指定新创建的div应该在单击时发出警报，但它不工作。谢谢

由于

#的

元素是动态创建的，因此需要使用事件委派将事件处理程序注册到这些元素

使用

$（'#s'）时，单击（..）

若要注册事件处理程序，它将仅将句柄注册到代码执行时dom中已存在的元素，在您的情况下，因为这些元素是在之后创建的，因此处理程序不会附加到新创建的元素

试试这个

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI Button - Icons</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #s
        {
            width:200px;
        }
        #div1
        {
            min-width:100px;
            width:auto;
            float:left;
            border:2px solid black;
            min-height:100px;
            height:auto;
            background-color:red;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("div").click(function(){
                $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
            });
            $("#s").click(function(){
                alert("sljsdf");
            });
        });
    </script>
</head>
<body>
    <div id="div1">
        VOLVO B9R
    </div>
</body>
</html>

$（文档）.ready（函数（）{
$（文档）。在（'click'，div'，function（）上{
美元（$（'NLC TRANSPORT'））之后；
});
$（文档）。在（“单击”，“s”，函数（）上）{
警报（“sljsdf”）；
});
});

由于

#的

元素是动态创建的，因此需要使用事件委派将事件处理程序注册到这些元素

使用

$（'#s'）时，单击（..）

试试这个

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery UI Button - Icons</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        #s
        {
            width:200px;
        }
        #div1
        {
            min-width:100px;
            width:auto;
            float:left;
            border:2px solid black;
            min-height:100px;
            height:auto;
            background-color:red;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("div").click(function(){
                $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
            });
            $("#s").click(function(){
                alert("sljsdf");
            });
        });
    </script>
</head>
<body>
    <div id="div1">
        VOLVO B9R
    </div>
</body>
</html>

$（文档）.ready（函数（）{
$（文档）。在（'click'，div'，function（）上{
美元（$（'NLC TRANSPORT'））之后；
});
$（文档）。在（“单击”，“s”，函数（）上）{
警报（“sljsdf”）；
});
});

对于动态添加的元素，需要进行事件消隐。执行id为s的元素的绑定代码时，

DOM中不存在该元素

$(document).ready(function(){
 $(document).on('click',"div",function(){
  $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
 });
 $(document).on("click", "#s", function(){
   alert("sljsdf");
 });
});

委托事件

委派事件的优点是，它们可以从中处理事件以后添加到文档中的子元素。通过选择一个元素，该元素保证在已附加委派事件处理程序，您可以使用委派事件避免频繁附加和删除事件处理程序

对于动态添加的元素，需要进行事件消隐。执行id为s的元素的绑定代码时，

DOM中不存在该元素

$(document).ready(function(){
 $(document).on('click',"div",function(){
  $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
 });
 $(document).on("click", "#s", function(){
   alert("sljsdf");
 });
});

委托事件

执行dom就绪处理程序时，dom中不存在

#s

div，因此不会将单击处理程序添加到元素中。您可以使用来解决此问题

$(document).on("click", "#s", function(){
   alert("sljsdf");
});

演示：

执行dom就绪处理程序时，dom中不存在

#s

div，因此不会将单击处理程序添加到元素中。您可以使用来解决此问题

$(document).on("click", "#s", function(){
   alert("sljsdf");
});

演示：

试试这样的东西

$(document).on('click', "#s", function () {
    alert("sljsdf");
});

参考文献

试试这样的方法

$(document).on('click', "#s", function () {
    alert("sljsdf");
});

参考文献

您不能向尚不存在的元素添加事件处理程序：

$("body").on('click','#s',function(){
   alert("sljsdf");
});

$（文档）.ready（函数（）{
$（“div”）。单击（函数（）{
美元（$（'NLC TRANSPORT'））之后；
$（“#s”）。单击（函数（）{
警报（“sljsdf”）；
});
});
});

您不能将事件处理程序添加到尚不存在的元素中：

$("body").on('click','#s',function(){
   alert("sljsdf");
});

$（文档）.ready（函数（）{
$（“div”）。单击（函数（）{
美元（$（'NLC TRANSPORT'））之后；
$（“#s”）。单击（函数（）{
警报（“sljsdf”）；
});
});
});

尝试以下代码：

 $(document).ready(function () {
     $("div").click(function () {
         $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
         $("#s").click(function () {
             alert("sljsdf");
         });
     });
 });

$（文档）.ready（函数（）{
$（“#div1”）。单击（函数（e）{
美元（$（'NLC TRANSPORT'））之后；
$（“#s”）。单击（函数（）{
警报（“sljsdf”）；
});
});
});

尝试以下代码：

 $(document).ready(function () {
     $("div").click(function () {
         $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
         $("#s").click(function () {
             alert("sljsdf");
         });
     });
 });

$（文档）.ready（函数（）{
$（“#div1”）。单击（函数（e）{
美元（$（'NLC TRANSPORT'））之后；
$（“#s”）。单击（函数（）{
警报（“sljsdf”）；
});
});
});

请查看此

或

尝试下面的代码

你的HTML

$(document).ready(function(){
 $("#div1").click(function(e){
    $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
     $("#s").click(function(){
         alert("sljsdf");
         });

    });

});

请查看此

或

尝试下面的代码

你的HTML

$(document).ready(function(){
 $("#div1").click(function(e){
    $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
     $("#s").click(function(){
         alert("sljsdf");
         });

    });

});

以下jQuery代码行将对您有所帮助

#s
{
width:200px;
float:right;
}
#div1
{
min-width:100px;
width:auto;
float:left;
border:2px solid black;
min-height:100px;
height:auto;
background-color:red;
}

$（文档）.ready（函数（）{
$（'body'）。在（'click'，'div1'，function（）上{
美元（$（'NLC TRANSPORT'））之后；
$（'#s'）。单击（函数（）{
警报（“a”）；
})
})
});

以下jQuery代码行将对您有所帮助

#s
{
width:200px;
float:right;
}
#div1
{
min-width:100px;
width:auto;
float:left;
border:2px solid black;
min-height:100px;
height:auto;
background-color:red;
}

$（文档）.ready（函数（）{
$（'body'）。在（'click'，'div1'，function（）上{
美元（$（'NLC TRANSPORT'））之后；
$（'#s'）。单击（函数（）{
警报（“a”）；
})
})
});

使用下面的代码

$(document).ready(function(){
    $('body').on('click','#div1',function(){
      $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));
      $('#s').click(function(){
       alert('a');
      })
    })
});

$（文档）.ready（函数（）{
$（“div”）。单击（函数（）{
美元（$（'NLC TRANSPORT'））之后；
$（“#s”）.bind（“单击”，函数（）{
警报（“sljsdf