No event is happening upon click of a hyperlink which added under jquery tab

Question

i have created jquery tabs like this:

$(function() {
        $( "#tabContainer" ).tabs();
      });

than appended some href links into it :

$(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").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").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. can anybody please help me out?

Answer 1

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. 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"});

});

Answer 2

Or you can create the element intially and hide it. Then show it on click of the first button. 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");
});

Answer 3

尝试这个

$(document).on('click', '#executePayLoad", function(){ /*..yourCode...*/ });