Question

我有jquery脚本，可以动态添加带有onclick()事件的按钮。 Onclick()事件只是调用其他一些JavaScript函数。 Jquery完美地工作，因为它动态创建按钮，但 onclick()事件触发器没有单击。我将调试警报放在someFunction中并查看number_of_created_buttons次，这意味着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>

Answer 1

将您的click更改为此：

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

这是因为您正在someFunction上立即调用click。您必须为其设置回调。就像上面一样。

Answer 2

我认为这是因为您实际上只是想将其指定为事件处理程序时调用该函数。试试这段代码，看看是否有帮助：

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

Answer 3

我认为您可以避免将事件处理程序附加到每个按钮事件，而只是将一个类添加到按钮并通过将它附加到同一个类来编写委托事件处理程序

JQUERY CODE：

       $(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
        });
    });

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

快乐编码：）

如何防止动态按钮的onclick事件触发渲染？

3 个答案: