动态生成的按钮添加单击事件总结

测试的js 版本是

尝试无效的方法

定义按钮

let deleteBtn=$("<button></button>").addClass("btn btn-danger delete_btn").append("删 除");

方法一、 click

$(".delete_btn").click(function () {
       alert("this is delete btn id is "+$(this).data("delete_book_id"));
   });

方法二、 on 绑定

$(".delete_btn").on("click",function () {
         alert("this is delete btn id is "+$(this).data("delete_book_id"));
     });

方法三、 bind绑定

$(".delete_btn").bind("click",function () {
        alert("this is delete btn id is "+$(this).data("delete_book_id"));

    });

尝试有效的方法

方式四、获取document 对象，再通过 on 绑定 click 属性的方法

$(document).on("click",".delete_btn",function () {
          alert("this is delete btn id is "+$(this).data("delete_book_id"));
      });

方式五、利用属性 attr（）绑定onclick

这种方式的按钮的写法

let deleteBtn=$("<button></button>").addClass("btn btn-danger delete_btn").append("删 除");
            deleteBtn.attr("onclick","deleteBtnOnclick("+item.id+")");

对应的函数

 function deleteBtnOnclick(deleteId){
        alert("onclick function  "+deleteId);
    }

总结，动态生成的按钮，绑定click 事件 ，推荐以下两种方式

1）获取document 对象，再通过 on 绑定 click 属性的方法

$(document).on("click",".delete_btn",function () {
          alert("this is delete btn id is "+$(this).data("delete_book_id"));
      });

2）利用属性 attr（）绑定onclick

这种方式的按钮的写法

let deleteBtn=$("<button></button>").addClass("btn btn-danger delete_btn").append("删 除");
            deleteBtn.attr("onclick","deleteBtnOnclick("+item.id+")");

对应的函数

 function deleteBtnOnclick(deleteId){
        alert("onclick function  "+deleteId);
    }