Javascript 如何防止动态按钮'；s在渲染时触发onclick事件？

我有一个jquery脚本，它动态地添加带有

onclick（）

事件的按钮

Onclick（）

事件只是调用其他JavaScript函数。Jquery工作得很好，因为它可以动态创建按钮，但是不单击事件就会触发

onclick（）。我将调试警报放在某个函数中，并看到它
创建按钮的次数
次，这意味着
onclick
事件在渲染时触发。如何防止这种奇怪的行为？我希望
onClick
事件仅在用户按下按钮时触发。

我的脚本如下：

<script>
    $(document).ready(function() {
        $('#getXmlFiles').click(function() {
            $.get('/getUserDocs', function(responseJson) {
                $("#docsDiv").empty();
                var $table = $('<table>').appendTo($('#docsDiv')).width('100%');
                $.each(responseJson, function(index, item){
                    var $btn = $('<button/>',
                    {
                        text: 'Action',
                        style:'width:100%',
                        click: someFunction(item)
                    });

                    $('<tr>').appendTo($table)
                        .append($('<td>').text(item))
                        .append($('<td>').append($btn));

                });
            });
        });
    });
</script>


$（文档）.ready（函数（）{
$（'#getXmlFiles'）。单击（函数（）{
$.get（'/getUserDocs'，函数（responseJson）{
$（“#docsDiv”）.empty（）；
var$table=$（''）.appendTo（$（'#docsDiv'））.width（'100%）；
$.each（responseJson，函数（索引，项）{
变量$btn=$（''，
{
文本：“行动”，
样式：“宽度：100%”，
单击：someFunction（项目）
});
$（“”）.appendTo（$table）
.append（$（''）.text（项目））
.append（$（''）.append（$btn））；
});
});
});
});
将您的
单击更改为此：

click: function () {
    someFunction(item);
}


这是因为您正在单击
按钮时立即调用
someFunction
。您必须为它设置回调。正如上面所述。
我认为发生这种情况是因为您正在调用函数，而实际上只是想将其指定为事件处理程序。请尝试此代码，看看这是否有帮助：

var $btn = $('<button/>',
{
    text: 'Action',
    style:'width:100%',
    click: someFunction  // note the missing brackets
});

var$btn=$（“”，
{
文本：“行动”，
样式：“宽度：100%”，
单击：someFunction//注意缺少的括号
});
我认为您可以避免将事件处理程序附加到每个按钮事件，而只需向按钮添加一个类，并通过这样将其附加到同一个类来编写委托事件处理程序

JQUERY代码：

       $(document).ready(function() {
         $('#getXmlFiles').click(function() {
             $.get('/getUserDocs', function(responseJson) {
            $("#docsDiv").empty();
            var $table = $('<table>').appendTo($('#docsDiv')).width('100%');
            $.each(responseJson, function(index, item){
                var $btn = $('<button/>',
                {
                    text: 'Action',
                    style:'width:100%',
                    //click: someFunction(item)
                    class:'trg'
                });

                $('<tr>').appendTo($table)
                        .append($('<td>').text(item))
                        .append($('<td>').append($btn));

            });
            });
        });

        $(document).on('click','.trg',function(){
             //code to handle click event for all dynamic buttons here
        });
    });

$（文档）.ready（函数（）{
$（'#getXmlFiles'）。单击（函数（）{
$.get（'/getUserDocs'，函数（responseJson）{
$（“#docsDiv”）.empty（）；
var$table=$（''）.appendTo（$（'#docsDiv'））.width（'100%）；
$.each（responseJson，函数（索引，项）{
变量$btn=$（''，
{
文本：“行动”，
样式：“宽度：100%”，
//单击：someFunction（项目）
类别：'trg'
});
$（“”）.appendTo（$table）
.append（$（''）.text（项目））
.append（$（''）.append（$btn））；
});
});
});
$（文档）.on（'单击'，'.trg'，函数（）{
//用于处理此处所有动态按钮的单击事件的代码
});
});

这样，在手动触发之前不会调用click事件，代码看起来也很整洁

快乐编码：）
你能在这里产生问题吗
项
参数应该传递给
someFunction
？@Rox，我也提到了参数传递问题，很好）