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

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

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;因此，可以通过点击触发事件。

还有一件事是你必须在Button标签字符串中定义按钮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

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

您正在创建动态元素，因此您需要委托文档或现有元素上的事件。
span不是ul中的正确元素。把它搬出去。
在将新按钮添加到容器后，您需要拨打$（＆＃39;按钮＆＃39;。）按钮（）。

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 Link - http://jsfiddle.net/Ashish_developer/fhob3Lw1/

使用.button（）时Jquery没有设置元素ID

HTML

Jquery的

4 个答案: