首页 / JAVASCRIPT / javascript – Click事件不适用于动态添加按钮

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Click事件不适用于动态添加按钮，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1765字，纯文字阅读大概需要3分钟。

内容图文

我参考了Creating a div element in jQuery并使用javascript创建了一个div元素.但是,当我动态添加按钮元素时,单击不起作用.我们需要做些什么改变才能使按钮点击工作？

注意：由于Binding to multiple view models nested in the Dom中提到的kendo控制要求,我们无法将该功能移到document.ready之外

更新的参考文献

> Wiring up click event using jQuery on() doesn’t fire on injected HTML via Ajax call
> how to attach jquery event handlers for newly injected html?
> After injecting html by jquery, the event handlers doesn’t work with/without delegate

码

<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单击事件.

要附加事件处理程序(从而从中获取事件)注入的元素,必须使用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");

}

在jQuery 1.7中添加了.on()方法来替换bind(),. delegate()和.live() – 它与所有这些相同. (要取消绑定任何DOM元素的事件处理程序,请使用.off())

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

内容总结

以上是互联网集市为您收集整理的javascript – Click事件不适用于动态添加按钮全部内容，希望文章能够帮你解决javascript – Click事件不适用于动态添加按钮所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/763177.html

来源：【匿名】