Question

我试图在点击按钮上创建一个按钮，如果还点击了这个创建的按钮，则应该有另一个动作。

这是我的代码：

//EDIT FUNCTION
            $('.edit').on('click', function(e){
                e.preventDefault();
                content = $(this).prop('name');
                id = $(this).prop('id');
                if(!document.getElementById('editnews')) {
                    jQuery('#edit').append('</br><textarea id="editnews" value="'+id+'"></textarea></br>');//is not shown, needed to stop, damn online lib
                    jQuery('#edit').append('<button name="'+id+'" class="saveedit btn btn-success btn-mini"><span class="glyphicon glyphicon-pencil"></span> Save</button>');
                }
                $('#editnews').val(content);
            });

        // EDIT (SEND) FUNCTION
        $('.saveedit').on('click', function(e){
            console.log("oke");
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'index.php?page=news',
                data: {editid:$(this).prop('name'), editcontent:$('#editnews').val()}
            }).done(function(response) {
                location.reload();
            });
        });

所以第一个编辑功能正常工作，但第二个编辑功能无法跟踪。希望你能帮助我。

Answer 1

您需要使用 event-delegation 才能为动态创建的元素绑定事件

$('#edit').on('click','.saveedit', function(e){
    console.log("oke");
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'index.php?page=news',
        data: {editid:$(this).prop('name'), editcontent:$('#editnews').val()}
    }).done(function(response) {
        location.reload();
    });
});

Answer 2

它无效，因为事件附加到脚本执行时DOM中可用的.saveedit。任何动态创建的.saveedit都不会附加此事件。

您需要做的是在document上附加点击事件，即只要点击.saveedit内存在document时处理它：

 $(document).on('click', '.saveedit', function(e){
            console.log("oke");
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'index.php?page=news',
                data: {editid:$(this).prop('name'), editcontent:$('#editnews').val()}
            }).done(function(response) {
                location.reload();
            });
        });

跟踪点击jQuery创建的按钮

2 个答案: