单击事件未触发选项卡中的动态添加按钮

Question

我有一个带有2个标签的页面。 每个选项卡均加载有其自己的DataTable和工具栏控件。 根据活动的选项卡，我动态添加适当的工具栏（带有自定义按钮）。 但是，对于选项卡中动态添加的元素，不会触发onclick事件。 以下是我用来将控件添加到不同选项卡的代码：

 $("#tabs").tabs( {
        active: 0,//Tab no.2 "Sha-2" by default active on page load,
        "activate": function(event, ui) {
            var table = $.fn.dataTable.fnTables(true);

            if ( table.length > 0 ) {

                $(table).dataTable().fnAdjustColumnSizing();
                var active = $( "#tabs" ).tabs( "option", "active" );
                if(active == 0){ //add toolbar to tab index = 1
                    $("div.toolbar").html('');

                }
                if(active == 1){ //add toolbar to tab index = 1


                    $("div.toolbar").html('<a id= "add-vendor"class="ui-button ui-widget ui-corner-all">ADD VENDOR</a><a id= "create-purchase_order"class="ui-button ui-widget ui-corner-all">CREATE PO</a>');

                    $( "#add-vendor" ).button().on( "click", function() {
                    alert('hello');
                    });

                }
            }
        }
    } );

该代码位于文档就绪函数内。有人可以帮助我捕获按钮的onclick事件吗？

Answer 1

它不起作用，因为您正在将锚标记转换为按钮。 如果删除按钮方法，则它可以正常工作：

 $("div.toolbar").html('<a id= "add-vendor"class="ui-button ui-widget ui-corner-all">ADD VENDOR</a><a id= "create-purchase_order"class="ui-button ui-widget ui-corner-all">CREATE PO</a>');

  $( "#add-vendor" ).on( "click", function() {
      alert('hello');
  });

如果要使用按钮，请创建一个按钮标签而不是锚标签。

Answer 2

$(document).on('click', "#add-vendor", function() {
           alert('hello');
   });

可以做到这一点，将事件委托给文档以动态添加元素。

Answer 3

您需要委派动态添加的按钮：

$(*ParentOfTheDynamicallyAddedButton*).delegate("DynamicallyAddedButton", "click", function(){
   *your function*
   }

您可能会说您的浏览器没有意识到动态添加的元素，因为它们不是脚本的一部分。 它们仅存在于DOM中，因此没有附加脚本。 但请不要在这方面引用我，我是菜鸟。