Click事件不适用于动态添加的按钮

lcj 发表于 Dev

LCJ

我拒绝在jQuery中创建div元素，并使用javascript创建了div元素。但是，当我动态添加按钮元素时，单击不起作用。我们需要做些什么更改才能使按钮单击工作？

注意：由于绑定到嵌套在Dom中的多个视图模型中提到的kendo控制要求，我们无法将函数移到document.ready之外

更新的参考

码

<head>

    <title>Test</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>



<script type="text/javascript">

    //lijo
    $(document).ready(function () 
    {

    $(".statiscDIV").append('<div>FIRST</div>');
      $(".statiscDIV").append('<div>hello <button class="MakeHoldDetailLinkButton" onclick = "showMakeAndHold();">View</button>  </div>');


    //lijo
    function showMakeAndHold() 
    {

        alert("HIIIIIII");

    }


    });

 </script>

</head>

<body>

 <div class="statiscDIV">

A

 </div>

</body>

茜草属

当您将代码注入DOM时，jQuery事件处理程序不会附加/绑定到新元素。（在注入新代码之前，jQuery已经绑定了DOM元素）。因此，当您单击按钮时，不会捕获jQuery click事件。

要附加事件处理程序（从而从中获取事件），必须使用jQuery .on()，如下所示：

jsFiddle Demo

$(".statiscDIV").append('<div>FIRST</div>');
$(".statiscDIV").append('<div>hello <button class="MakeHoldDetailLinkButton">View</button>  </div>');

$(document).on('click','.MakeHoldDetailLinkButton',function(){
    showMakeAndHold();    
});

function showMakeAndHold() {

    alert("HIIIIIII");

}

该.on()方法是在jQuery 1.7中添加的，以替换bind()，.delegate()和.live()-与所有这些功能相同。（要取消绑定任何DOM元素的事件处理程序，请使用.off()）

资料来源：http：//api.jquery.com/on/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。