Question

我有一个函数和一些代码：

function findMember(str) {
        // console.log('search: ' + str);

        $.post("includes/search.php", {
            search: str,
        }, function(data, status) {
            // console.log(data);
            $('#creatorSearchMain').html(data);
        });

    }

    $('#creatorSearchInput').keyup(function() {
        var target = $('#creatorSearchInput');
        findMember(target.val()); //remove and uncomment other if want to wait before request
    });

这将从输入中选择文本并将其与.post一起使用来查询数据库以搜索搜索到名称的用户。 .post返回添加到div的html代码。

在返回的html中有一个按钮：

<button class="followButton " type="submit" value="1">Follow</button>

单击该按钮时，它会运行另一个javascript函数。

除了在我使用.html添加返回到div的html后尝试单击按钮时，这一切都完美无缺。

为了澄清，该按钮在页面首次加载时仍然有效，但当我将其放回到那里时，新的结果似乎没有被javascript选中。

这就是我用来激活onclick按钮的功能：

$('.followButton').on("click", function() { 
#code in here
});

提前致谢！

Answer 1

您的按钮是动态添加的，使用 event delegation on() 为其添加点击处理程序，

$("#creatorSearchMain").on("click",".followButton", function() { 
    #code in here
});

*此处on()之前的选择器$("#creatorSearchMain")应该是静态元素。

Answer 2

使用该代码：

{{1}}

Jquery在点击动态添加的按钮

2 个答案: