单击功能无法动态添加div

Question

<button id="add_tab">Add Tab</button>
<input id="text-search" type="text"/>
<div id="tabs">
	<ul>
		<li><a href="#tabs-1" style="padding:0;"><span class="color-bar">&nbsp;</span><div class="alert-header">Alert #1</br><span class="time-date">5:30pm - 07/11/2014</span></div><span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></a></li>
		<li><a href="#tabs-2" style="padding:0;"><span class="color-bar">&nbsp;</span><div class="alert-header">Alert #2</br><span class="time-date">5:30pm - 07/11/2014</span></div><span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></a></li>
		<li><a href="#tabs-3" style="padding:0;"><span class="color-bar">&nbsp;</span><div class="alert-header">Alert #3</br><span class="time-date">5:30pm - 07/11/2014</span></div><span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></a></li>
	</ul>
	<div id="tabs-1" style="box-shadow: 10px 10px 50px #888888;">
		<p class="alert-text">This one is acknowledged</p>
	</div>
	<div id="tabs-2" style="box-shadow: 10px 10px 50px #888888;">
		<p class="alert-text">This one is cleared</p>
	</div>
	<div id="tabs-3" style="box-shadow: 10px 10px 50px #888888;">
		<p class="alert-text">This one is active</p>
	</div>
</div>

我正在静态添加3个div，并根据jquery调用添加剩余的div。 我申请类“alert-header”的click函数适用于静态div的click事件，但不能用于动态生成的div .. 请给我解决方案......

这是我的代码：

这是点击事件调用

$('.alert-header').click(function()
	{
		alert("Called now");
});
	

这是我添加动态div以及某些静态内容的地方：

var tabTitle = $( "#tab_title" ),tabContent = $( "#tab_content" ),tabTemplate = "<li><span class='color-bar'>&nbsp;</span><div class='alert-header' ><a style='padding:0.5px' href='<%="#"%>{href}'><%="#"%>{label}</a></br><span class='time-date' style='margin-left:-100%'><%="#"%>{time} - <%="#"%>{date}</span><input id='<%="#"%>alertval' type='hidden' value='<%="#"%>{alertId}'/></div><span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",tabCounter = 4;
																					 
	
//mouse over
var tabs =$( "#tabs" ).tabs({
	active: false,
	event: "mouseenter",
	collapsible: true
}).mouseleave(function () {
	$(this).tabs({
		active: false
	});
});


// modal dialog init: custom buttons and a "close" callback reseting the form inside
var dialog = $( "#dialog" ).dialog({
	autoOpen: false,
	modal: true,
	buttons: {
		Add: function() {
			addTab();
			$( this ).dialog( "close" );
		},
		Cancel: function() {
			$( this ).dialog( "close" );
		}
	},
	close: function() {
		form[ 0 ].reset();
	}
});

// addTab form: calls addTab function on submit and closes the dialog
var form = dialog.find( "form" ).submit(function( event ) {
	addTab();
	dialog.dialog( "close" );
	event.preventDefault();
});

// actual addTab function: adds new tab using the input from the form above
function addTab() {
	var label = tabTitle.val() || "Tab " + tabCounter,
		id = "tabs-" + tabCounter,
		li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
		tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

	tabs.find( ".ui-tabs-nav" ).append( li );
	tabs.append( "<div id='" + id + "' style='box-shadow:10px 10px 50px #888;'><p>" + tabContentHtml + "</p></div>" );
	tabs.tabs( "refresh" );
	tabCounter++;
}

function addTab(alertId, date, time, status, desc) {
	var label = tabTitle.val() || "Alert #" + tabCounter,
		id = "tabs-" + tabCounter,
		ti = time + "",
		dt = date + "",
		li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ).replace(/#\{time\}/g,ti).replace(/#\{date\}/g,dt).replace(/#\{alertId\}/g,alertId) ),
		tabContentHtml = desc || "Tab " + tabCounter + " content.";

	tabs.find( ".ui-tabs-nav" ).append( li );
	tabs.append( "<div id='" + id + "' style='box-shadow:10px 10px 50px #888;'><p>" + desc + "</p></div>" );
	
	tabs.tabs( "refresh" );
	tabCounter++;
}

Html page

<!-- begin snippet: js hide: false -->

Answer 1

你必须使用jquery创建一个对象，添加id和样式然后追加它。像这样：

$('<div></div>').attr('id', ...)...

如果它不起作用，请记住，当您以这种方式创建对象时，可以使用.on（）函数将事件侦听器绑定到它：）

Answer 2

Event Delegation

$('body').on('click','.alert-header',function(){
  //your code here
});

获取动态元素的价值，如：

$('body').find('#alert-id').val();