单击在 jquery 选项卡下添加的超链接时不会发生任何事件

Question

我已经创建了这样的 jquery 选项卡：

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

在其中添加了一些 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>");

单击“executePayLoad”链接后，我想将新的 href 链接动态附加到现有选项卡之一，如下所示：

$("#executePayLoad").click(function(){
                if($('#outputPayLoadSave').length == 0)
                    $("#tabContainer ul").append("<a href=# id='outputPayLoadSave' class = 'buttonsExeSave'>DownloadResponse</a>");
.
.
.
.
});

点击“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"});
        });

但是当我单击“outputPayLoadSave”链接时，上面写的事件没有发生，即使控件没有进入该事件函数。有人可以帮帮我吗？

Answer 1

或者您可以先创建元素并将其隐藏。然后在单击第一个按钮时显示它。 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 2

您必须使用 .on 函数将处理程序与动态创建/添加到 DOM 中的元素挂钩，但是在查看您的代码时，您通常只是将单击事件与该锚元素挂钩。显然，它不会起作用。

$(document.body).on("click","#outputPayLoadSave",function(){

});

您的代码的干净版本，

$(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 3

试试这个

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