使用 .button() 时 Jquery 未设置元素 ID

Question

我有以下JSfiddle。它只是在您更改选项卡时更改按钮的 id 和文本，然后当您单击它们时它只会显示警报。

我知道代码可以正常工作，因为在您更改选项卡之前，它可以按预期工作。但是，当您更改选项卡时，按钮的 id 已设置，但单击事件不会触发。

HTML

<div id="lineitems">
    <div id="nav-wrapper">
        <div id="topnav">
          <ul>
            <li><a href="#allocate">Awaiting Allocation</a></li>
            <li><a href="#not-issued">Awaiting Issued</a></li>
            <li><a href="#issued">Issued</a></li>
            <span id="button-container">
            <button id='allocate-parts' type='button' class="allocate">Allocate Selected Parts</button>
            </span>
          </ul>
        </div>
    </div>

<div id="allocate">Allocate tab</div>
<div id="not-issued">Awaiting Issued tab</div>
<div id="issued">Issued Items</div>

jQuery

$( "#lineitems" ).tabs();
$('button').button();

        $("#lineitems").tabs({
      activate: function (event, ui) {
        issued = ui.newPanel.attr('id'); //Get newly selected tab
        
        //alert("tabs "+issued);
        switch(issued) {
            case "allocate": var buttonText = "<button type='button' id='allocate-parts'>Allocate Selected Parts</button>"; $('#joblist').removeAttr("disabled"); $('button').prop('id','allocate-parts');
                break;
            case "not-issued": var buttonText = "<button type='button' id='issue-parts'>Issue Selected Parts</button>"; $('#joblist').removeAttr("disabled"); $('button').prop('id','issue-parts');
                break;
            case "issued": var buttonText = "<button type='button'>Return Selected Parts</button>"; $('#joblist').removeAttr("disabled");
            
        } //End of switch
          
     $('#button-container').html(buttonText);
     $('button').button();
          
      }
        });
    
          
$('#allocate-parts').click(function() {
   alert("Parts Allocated");
});
          
$('#issue-parts').click(function() {
   alert("Parts Issued");
});
      

在标签更改时，我尝试更改 HTML 中的 id 并使用 $('button').prop('id','issue-parts')。但它们都不起作用。

Answer 1

您必须使用“委托”方法，例如：

$(document).delegate('#allocate-parts',"click",function() {
   alert("Parts Allocated");
});

或 您必须使用“on”方法，例如：

$(document).on("click",'#issued-parts',function() {
   alert("Parts Issued");
});

请查看更新后的小提琴：JSFiddle Updated

因为是在运行时改变按钮的id，所以需要将方法委托给document；所以事件可以在点击时触发。

还有一件事是你必须在按钮标签字符串中定义按钮ID：

<button type='button' id='issued-parts'>Return Selected Parts</button>

谢谢

Answer 2

只需如下更改按钮的点击事件并尝试

$(document).on("click","#allocate-parts",function() {
   alert("Parts Allocated");
});

$(document).on("click","#issue-parts",function() {
   alert("Parts Issued");
});

如果仍然无法正常工作，请将您的代码更新为

//alert("tabs "+issued);
        switch(issued) {
            case "allocate": var buttonText = "<button id='allocate-parts' type='button'>Allocate Selected Parts</button>"; 
                break;
            case "not-issued": var buttonText = "<button id='issue-parts' type='button'>Issue Selected Parts</button>";
                break;
            case "issued": var buttonText = "<button type='button'>Return Selected Parts</button>";

        } //End of switch

     $('#button-container').empty();
     $('#button-container').html(buttonText);

这肯定行得通。

希望这会有所帮助:)

Answer 3

如果我理解你的话，那么你需要考虑一些事情。

1. 您正在创建动态元素，因此您需要在文档或现有元素上委派事件。

2. span 不是 ul 中的正确元素。所以把它移出去。

3. 新按钮添加到容器后需要调用$('button').button()。

Example:

JS：

$( "#lineitems" ).tabs();

$('button').button();

        $("#lineitems").tabs({
      activate: function (event, ui) {
        issued = ui.newPanel.attr('id'); //Get newly selected tab
        var buttonText = "";
        //alert("tabs "+issued);
        switch(issued) {
        case "allocate":  buttonText = "<button id='allocate-parts'  type='button'>Allocate Selected Parts</button>";           $(buttonText).attr('id','allocate-parts');
                break;
            case "not-issued":  buttonText = "<button id='issue-parts' type='button'>Issue Selected Parts</button>"; 
                break;
            case "issued":  buttonText = $("<button id='return-parts' type='button'>Return Selected Parts</button>");


        } //End of switch

        $('#button-container').empty().append(buttonText);
        $('button').button();

      }
        });

$(document).on('click','#allocate-parts',function() {
   alert("Parts Allocated");
});

$(document).on('click','#issue-parts',function() {
   alert("Parts Issued");
});


$(document).on('click','#return-parts',function() {
   alert("Return Parts");
});

HTML：

<div id="lineitems">
    <div id="nav-wrapper">
        <div id="topnav">
          <ul>
            <li><a href="#allocate">Awaiting Allocation</a></li>
            <li><a href="#not-issued">Awaiting Issued</a></li>
            <li><a href="#issued">Issued</a></li>
          </ul>
            <span id="button-container">
            <button id='allocate-parts' type='button' class="allocate">Allocate Selected Parts</button>
            </span>
        </div>
    </div>

    <div id="allocate">Allocate tab</div>
    <div id="not-issued">Awaiting Issued tab</div>
    <div id="issued">Issued Items</div>
</div>    

Answer 4

HTML 代码 -

<div id="lineitems">
    <div id="nav-wrapper">
        <div id="topnav">
          <ul>
            <li><a href="#allocate">Awaiting Allocation</a></li>
            <li><a href="#not-issued">Awaiting Issued</a></li>
            <li><a href="#issued">Issued</a></li>
            <span id="button-container">
            <button id='allocate-parts' type='button' class="allocate">Allocate Selected Parts</button>
            </span>
          </ul>
        </div>
    </div>

    <div id="allocate">Allocate tab</div>
    <div id="not-issued">Awaiting Issued tab</div>
    <div id="issued">Issued Items</div>
</div>

jQuery 代码 -

$( "#lineitems" ).tabs();
$('button').button();

        $("#lineitems").tabs({
      activate: function (event, ui) {
        issued = ui.newPanel.attr('id'); //Get newly selected tab
        switch(issued) {
            case "allocate": var buttonText = "Allocate Selected Parts";var id ="allocate-parts";
                break;
            case "not-issued": var buttonText = "Issue Selected Parts";
                var id ="not-issue-parts";
                break;
            case "issued": var buttonText = "Return Selected Parts";
                var id ="issue-parts";

        } //End of switch

     $('#button-container .ui-button span.ui-button-text').html(buttonText);
         $('#button-container .ui-button').attr('id', id);
      }
        });

$(document).on('click','#allocate-parts', function() {
   alert("Parts Allocated");
});

$(document).on('click','#issue-parts',function() {
   alert("Parts Issued");
});

$(document).on('click','#not-issue-parts',function() {
   alert("Parts Not Issued");
});

JSFiddle 链接 - http://jsfiddle.net/Ashish_developer/fhob3Lw1/