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中，因此没有附加脚本。但不要引用我，我是一个菜鸟。

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

3 个答案: