[英]No event is happening upon click of a hyperlink which added under jquery tab
i have created jquery tabs like this: 我已经创建了这样的jquery标签:
$(function() {
$( "#tabContainer" ).tabs();
});
than appended some href links into it : 而不是在其中附加一些href链接:
$(document).ready(function(){
$("#tabContainer ul").append("<a href=# id='executePayLoad' class = 'buttonsExeSave'>Execute</a>");
$("#tabContainer ul").append("<a href=# id='inputPayLoadSave' class = 'buttonsExeSave'>DownloadRequest</a>");
$("#tabContainer ul").append("<a href=# id='expand' class = 'buttonsExeSave'>Expand</a>");
$("#tabContainer ul").append("<a href=# id='collapse' class = 'buttonsExeSave'>Collapse</a>");
And upon click of 'executePayLoad' link i wanted to append a new href link dynamically to one of the existing tab like this: 并点击“ executePayLoad”链接后,我想将一个新的href链接动态添加到现有选项卡之一,如下所示:
$("#executePayLoad").click(function(){
if($('#outputPayLoadSave').length == 0)
$("#tabContainer ul").append("<a href=# id='outputPayLoadSave' class = 'buttonsExeSave'>DownloadResponse</a>");
.
.
.
.
});
and upon click of 'outputPayLoadSave' link i wanted to fire an event similarly like such : 然后单击“ outputPayLoadSave”链接,我想触发类似这样的事件:
$("#outputPayLoadSave").click(function(){
alert("inside");
GLR.messenger.show({msg:"Generating file...", mode:"loading"});
var xmlStr = xmlView.getXmlAsString();
$('#hidden_form > input[name=xml_string]').val(xmlStr);
$('#hidden_form > input[name=adapterName]').val(adapterValue);
$('#hidden_form > input[name=mode]').val("response");
$('#hidden_form').attr('action','xmlTreeView/Save.do');
$('#hidden_form').submit();
GLR.messenger.inform({msg:"Done.", mode:"success"});
});
but when i am clicking on 'outputPayLoadSave' link the event written above is not happening, even the control is not coming inside that event function. 但是当我点击'outputPayLoadSave'链接时,上面写的事件没有发生,甚至控件也没有进入该事件函数。 can anybody please help me out?
有人可以帮我吗?
You have to use .on function to hook the handler with elements which are created/added dynamically into the DOM, But while looking at your code, You are simply hooked click event with that anchor element normally. 您必须使用.on函数将具有动态创建/添加到DOM中的元素的处理程序挂钩,但是在查看代码时,通常只是简单地将锚定事件与click事件挂钩。 Obviously, it will not work.
显然,它将不起作用。
$(document.body).on("click","#outputPayLoadSave",function(){
});
Cleaned version of your code, 代码的清理版本,
$(document.body).on("click","#outputPayLoadSave",function(){
alert("inside");
GLR.messenger.show({msg:"Generating file...", mode:"loading"});
var xmlStr = xmlView.getXmlAsString();
$('#hidden_form > input[name=xml_string]').val(xmlStr);
$('#hidden_form > input[name=adapterName]').val(adapterValue);
$('#hidden_form > input[name=mode]').val("response");
$('#hidden_form').attr('action','xmlTreeView/Save.do');
$('#hidden_form').submit();
GLR.messenger.inform({msg:"Done.", mode:"success"});
});
Or you can create the element intially and hide it. 或者,您可以初始创建元素并将其隐藏。 Then show it on click of the first button.
然后单击第一个按钮显示它。 JSfiddle: http://jsfiddle.net/u63CU/
JSfiddle: http : //jsfiddle.net/u63CU/
$(document).ready(function(){
$("#tabContainer ul").append("<a href=# id='executePayLoad' class = 'buttonsExeSave'>Execute</a>");
$("#tabContainer ul").append("<a href=# id='inputPayLoadSave' class = 'buttonsExeSave'>DownloadRequest</a>");
$("#tabContainer ul").append("<a href=# id='expand' class = 'buttonsExeSave'>Expand</a>");
$("#tabContainer ul").append("<a href=# id='collapse' class = 'buttonsExeSave'>Collapse</a>");
$("#tabContainer ul").append("<a href=# id='outputPayLoadSave' class = 'buttonsExeSave'>DownloadResponse</a>");
$("#outputPayLoadSave").hide();
});
$("#executePayLoad").click(function(){
$("#outputPayLoadSave").show();
});
$("#outputPayLoadSave").click(function(){
alert("inside");
});
尝试这个
$(document).on('click', '#executePayLoad", function(){ /*..yourCode...*/ });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.