2 wild84 wild84 于 2017.09.11 16:53 提问

通过append添加的按钮,再通过样式获取不到

代码如下:

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 按钮标签</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<button class="btn btn-default" type="button">按钮</button>
</div>
    <script>
        $(".btn").click(function(){
            $("div").append('<button class="alert" type="button">按钮</button>');
        })
        $(".alert").click(function(){
            alert(1);
        })
        </script>
</body>
</html>

4个回答

qq_36671474
qq_36671474   2017.09.11 17:18
已采纳
$(".btn").click(function(){ $("div").append('<button id="alert12" class="alert" type="button">按钮</button>'); }); $('div').on('click','.alert',function(event) { alert('111'); });

说明:用bind和click只能为页面已经加载好的dom元素绑定事件,而对于动态添加的元素,可选择用delegate()/live()/on()方法来绑定事件

q213546879
q213546879   2017.09.11 16:56

代码执行顺序问题,把click方法放到append后面执行就可以了

 <script>
    $(".btn").click(function(){
        $("div").append('<button class="alert" type="button">按钮</button>');
        $(".alert").click(function(){
            alert(1);
        })
    })
</script>
q213546879
q213546879 回复wild84: <script> $(".btn").click(function(){ $("div").append('<button class="alert" type="button">按钮</button>'); $(".alert").click(function(){ $(this).remove();//删除当前点击的按钮 }) }) </script>
2 个月之前 回复
wild84
wild84 当点击删除按钮时执行删除该条记录的操作.或者点击修改按钮时转到其他页面显示该条新闻信息,就这样
2 个月之前 回复
wild84
wild84 我的需求是:我从数据库取出10条新闻,这10条记录用ajax方式append到表格里,并且每条记录带上修改和删除按钮,
2 个月之前 回复
gongsq
gongsq 回复wild84: 因为你用的是类选择器,所以添加了多少个就会执行多少次的弹框。。
2 个月之前 回复
q213546879
q213546879 回复wild84: 或者你告诉我你的需求,不然这样子可能你我说的都不在一个点上
2 个月之前 回复
q213546879
q213546879 回复wild84: 当然了,因为你这里是给所有的.alert加上点击事件呀,如果说你要单独给某一个加点击事件的话你得很明确的知道是哪个按钮啊,比如说要给第二个按钮添加点击事件,那么就是$(".alert").eq(1).click...
2 个月之前 回复
wild84
wild84 这样也不行,这样点击一个按钮,那么添加了多少个按钮就执行多少次alert();
2 个月之前 回复
u013181058
u013181058   2017.09.11 17:23

方法一:可以改成button的onclick的方式,
方法二:获取最后一个.alert,$('.alert').eq(总数-1).click

zhwyj1019
zhwyj1019   2017.09.11 19:33

JQ需要入口函数的$(function() {});

Csdn user default icon
上传中...
上传图片
插入图片