Question

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

这里当我点击第一个div时，程序会创建另一个div。新创建的div没有响应click事件。在当前的代码中，我已经指定新创建的div应该在点击时发出警报，但它不起作用。谢谢！

Answer 1

由于#s元素是动态创建的，因此您需要使用事件委派来为这些元素注册事件处理程序。

当您使用$('#s').click(....);注册事件处理程序时，它会将句柄只注册到代码执行时已存在于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");
 });
});

DEMO

Answer 2

动态添加元素需要事件降级。执行具有id s的元素的绑定代码的时间DOM

中不存在该元素

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

委派活动

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序jQuery doc。

Answer 3

执行dom ready处理程序时，dom中不存在#s div，因此单击处理程序不会添加到元素中。您可以使用event delegation来解决此问题

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

演示：Fiddle

Answer 4

尝试这样的事情

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

参考

http://api.jquery.com/on/

Answer 5

请参阅 LINK

或

尝试以下代码......

您的HTML ....

<div id="div1"> VOLVO B9R </div>

您的JQuery代码....

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

你的CSS ......

#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; }

Answer 6

以下jQuery代码行将帮助您..

$(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');
      })
    })
});

Answer 7

使用以下代码..

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

    });

祝你好运。

Answer 8

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

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

Answer 9

试用此代码：

$(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 onclick新元素未正确创建

9 个答案: